我试图在文本之前和之后各添加一行，但我希望它能够响应，目前我能找到的唯一方法是使用宽度......所以它不响应。
我更愿意仅在伪元素之前和之后使用，但如果不可能，那么我会发现另一种方法。
HTML:
<div class="section-header text-center">
<h2>Testing</h2>
</div>
CSS:
.section-header {
position: relative;
}
.section-header h2 {
border: 2px solid rgba(0, 0, 0, 0.1);
padding: 0.3em 0.8em;
display: inline-block;
}
.section-header::before,
.section-header::after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;
opacity: 0.1;
}
.section-header::after {
right: 0;
left: auto;
}
.text-center {
text-align: center !important;
}
JSFiddle 演示
您可以考虑相对于的伪元素h2相反，依靠溢出来隐藏不需要的部分：
.section-header {
position: relative;
overflow:hidden; /*mandatory*/
}
.section-header h2 {
border: 2px solid black;
padding: 0.3em 0.8em;
display: inline-block;
position:relative;
}
.section-header h2::before,
.section-header h2::after {
content: " ";
width: 100vw; /*big value here*/
height: 1px;
position: absolute;
top: 0.6em;
background:black;
}
.section-header h2::after {
left: calc(100% + 40px); /*40px offset from the title*/
}
.section-header h2::before {
right: calc(100% + 40px);
}
.text-center {
text-align: center;
}
<div class="section-header text-center">
<h2>Testing</h2>
</div>
另一个没有透明度的想法是考虑背景和框阴影，如下所示：
.section-header {
position: relative;
background:linear-gradient(black,black) center/100% 1px no-repeat;
}
.section-header h2 {
border: 2px solid black;
padding: 0.3em 0.8em;
display: inline-block;
position:relative;
background:#fff;
box-shadow:
40px 0 0 #fff,
-40px 0 0 #fff;
}
.text-center {
text-align: center;
}
<div class="section-header text-center">
<h2>Testing</h2>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
