我试图在我的网站标题下创建一个小边界。我用的是前后伪元素。代码有点特殊,因为我正在修改我正在使用的模板的代码。就像这样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>

10-08 19:15