如何使用 :before 和 :after 使元素底部的小边框居中？

Question

我想在网站的标题下方创建一个小边框。我在 pseudo-elements 之前和之后使用它。代码有点特别，因为我正在调整我正在使用的模板的代码。是这样的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>

Answer 1

给伪元素一个left和right属性——然后用margin: auto居中

.headline p:before,
.headline p:after {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 70px;
  border-bottom: 3px solid black;
  content: "";
}

h3 {
  text-align: center;
}

<div class="headline">
  <h3>
    My title
  </h3>
  <p>
  </p>
</div>

fiddle

Answer 2

使用保证金属性

将您的代码重写为

.headline p:before, .headline p:after {
margin: 0 auto;
width: 70px;
border-bottom: 3px solid black;
content: "";
}

.headline p:before,
.headline p:after {
  margin: 0 auto;
  display: block;
  width: 70px;
  border-bottom: 3px solid black;
  content: "";
}

h3 {
  text-align: center;
}

<div class="headline">
  <h3>
My title
</h3>
  <p>
  </p>
</div>

Answer 3

只需使用 margin:auto

.headline p:before,
.headline p:after {
  margin: auto;
  display: block;
  width: 70px;
  border-bottom: 1px solid black;
  content: "";
}

h3 {
  text-align: center;
}

<div class="headline">
  <h3>
    My title
  </h3>
  <p>
  </p>
</div>

Answer 4

使用calc()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>

如何使用 :before 和 :after 使元素底部的小边框居中？

How to center a small border at the bottom of an element using :before and :after?

html

css

pseudo-element