html - 如何使用:before和:after在元素底部将小边框居中？

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