如何在h2后放置固定宽度的居中边框底部？

Question

如何在border-bottom之后放置具有固定宽度（100px）的居中h2（根据文字可以更长或更短）？

CODE

h2 {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 50px;
}
h2:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  border-bottom: 2px solid magenta;
}

<h2>Something</h2>

我正在尝试关注

Fiddle

Answer 1

由于您有一个固定宽度的边框底部，您可以将其添加到h2:after {：

margin-left: -50px;

想象一下left: 50%;将左边缘点移动到中心。这意味着您的边框底部最左端将位于中心点。这就是您需要margin-left: -50px;。

的原因

以下是一些关于CSS中心内容的有用链接：

1. w3c
2. CSS-Tricks

工作示例：

＆＃13;
＆＃13;
h2 {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 50px;
}

h2:after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 0;
  width: 100px;
  border-bottom: 2px solid magenta;
}
＆＃13;
<h2>Something</h2>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以在伪元素transform: translateX(-50%)中使用::after，因此无论文本是什么，它都将始终居中

＆＃13;

＆＃13;

h2 {
  position: relative;
  text-align: center
}
h2::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -50px;
  width: 100px;
  border-bottom: 2px solid magenta;
}
h2:last-of-type {
  top: 100px
}

＆＃13;

<h2>
Something
</h2>
<h2>
Something  More here
</h2>

＆＃13;

＆＃13;

＆＃13;

Answer 3

通过将宽度除以2来使用负边距，如100/2 = 50;

h2 {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 50px;
}

h2:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  margin: 0 0 0 -50px;
  border-bottom: 2px solid magenta;
}

<h2>
Something
</h2>