我想实现边框顶部和底部像下面的图像如何实现与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%,rgba(147,147,1) 50%,0) 100%);
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
解决方法
我在你的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;
}
编辑：
如果你想要一个固定的宽度你可以添加：
h1:before,h1:after{
width: 150px; /* You can change this value */
left: 50%;
transform: translateX(-50%);
}
