html – 点缀的顶部和底部边框比文本短

概述我想实现边框顶部和底部像下面的图像如何实现与CSS技巧？ 挑战是我不希望整个宽度与边框,它也应该响应. 手机版本是http://i.imgur.com/XZTW28N.jpg,它也应该在桌面和移动浏览器中工作. 我尝试使用％width边框,但它不工作. 我写下面的代码,但它不是100％完美的答案. HTML： <h1>How it Works</h1 CSS： h1:before, h1:afte 我想实现边框顶部和底部像下面的图像如何实现与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;}

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

编辑：

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

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

DEMO2

总结

以上是内存溢出为你收集整理的html – 点缀的顶部和底部边框比文本短全部内容，希望文章能够帮你解决html – 点缀的顶部和底部边框比文本短所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。