我试图在我的网站标题下创建一个小边界。我用的是前后伪元素。代码有点特殊,因为我正在修改我正在使用的模板的代码。就像这样see fiddle
问题是“left:48%;”属性:我已经手动设置了它,但是根据屏幕的大小,它可能居中或不居中,所以它没有响应。有没有办法使边框始终位于文本的中心?
.headline p:before,
.headline p:after {
position: absolute;
left: 48%;
display: block;
width: 70px;
border-bottom: 3px solid black;
content: "";
}
h3 {
text-align: center;
}
<div class="headline">
<h3>
My title
</h3>
<p>
</p>
</div>
最佳答案
使用css函数如下:
.headline p:before,
.headline p:after {
position: absolute;
left: calc(50% - 35px);
display: block;
width: 70px;
border-bottom: 3px solid black;
content: "";
}
h3 {
text-align: center;
}
<div class="headline">
<h3>My title</h3>
<p></p>
</div>