我正在尝试制作一条水平线,中间有一些文本。 例如:
------------------------------------我的标题在这里-------- ----------------------
有没有办法在 CSS 中做到这一点?显然没有所有的“-”破折号。
最佳答案
这就是我的大致做法:通过设置 border-bottom
创建该行在包含h2
然后给出 h2
较小的line-height
.然后将文本放入嵌套的 span
中。背景不透明。
h2 {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>
我只在 Chrome 中测试过,但没有理由不能在其他浏览器中运行。
JSFiddle:http://jsfiddle.net/7jGHS/
关于html - 中间有单词的水平线的CSS技巧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44354019/