使用CSS和
HTML有很多答案可以在某些文本的两侧添加一行,但这些行总是填充容器的整个宽度.我只希望这些行在文本的两侧长度为150px,如下所示:
文本将是动态的,因此可能会改变长度并需要居中.
https://jsfiddle.net/vh0j4q1e/
<div id="container">
#container { width:800px; text-align:center; background-color:#ccc; } h1 { position: relative; font-size: 30px; z-index: 1; overflow: hidden; text-align: center; } h1:before,h1:after { position: absolute; top: 51%; overflow: hidden; width: 50%; height: 3px; content: ''; background-color: red; } h1:before { margin-left: -50%; text-align: right; }
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。