html - 虚线顶部和底部边框比文本短

Question

我想像下图那样实现顶部和底部的边框，如何使用 CSS 技巧实现？

挑战是我不想要带边框的整个宽度，它也应该是响应式的。

手机版图片为http://i.imgur.com/XZTW28N.jpg它也应该适用于桌面和移动浏览器。

我尝试使用 %width 边框，但它不起作用。

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

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/

Answer 1

我对您的 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

编辑:

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

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

DEMO2