虚线的顶部和底部边框短于文本 [英] Dotted top and bottom border shorter than text

问题描述

我想实现边框顶部和底部如下图所示。挑战是我不想要整个宽度的边框，它也应该响应。

b
$ b

移动版图片是 http://i.imgur.com/

我尝试使用％width border，但它不工作。

我在下面写了代码，但它对我来说不是100％完美的答案。

HTML：

 < h1>运作方式< / h1 
  

CSS：

  h1：before，h1：after {
 content：; 
 height：1px; 
 background：linear-gradient（to right，rgba（0,0,0,0）0％，rgba（147,147,147,1）50％，rgba（0,0,0,0）100％）; 
 display：block; 
 margin-bottom：10px; 
 margin-top：10px; 
} 
  

http://jsfiddle.net/wjhnX/488/

解决方案

我在你的CSS中做了一些修改：

  h1 {
 text-align：center; 
 font-size：70px; 
} 
 
 h1：before，h1：after {
 position：relative; 
 content：; 
 width：30％; 
 left：35％; 
 display：block; 
 margin-bottom：10px; 
 margin-top：10px; 
 border-bottom：5px dotted yellow; 
} 
  

DEMO

EDIT： b $ b

如果您想要一个固定的宽度，您可以添加：

  h1：before，h1：after {
 width：150px; / *你可以改变这个值* / 
 left：50％; 
 transform：translateX（-50％）; 
} 
  

DEMO2

I want to achieve border top and bottom like below image how can I achieve with CSS tricks?

Challenge is I don't want entire width with border and it should be responsive too.

Mobile version image is http://i.imgur.com/XZTW28N.jpg and it should work in desktop and mobile browser too.

I tried with %width border but it's not working.

I wrote below code but it's not 100% perfect answer for me.

HTML:

<h1>How it Works</h1

CSS:

h1:before, h1:after {
    content: "";
    height: 1px;
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

http://jsfiddle.net/wjhnX/488/

解决方案

I made a few changes in your CSS:

h1{
    text-align: center;
    font-size: 70px;
}

h1:before, h1:after{
    position: relative;
    content: "";
    width: 30%;
    left: 35%;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 5px dotted yellow;
}

DEMO

EDIT:

If you want a fixed width you can add:

h1:before, h1:after{
    width: 150px;     /* You can change this value */
    left: 50%;
    transform: translateX(-50%);
}

DEMO2

这篇关于虚线的顶部和底部边框短于文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！