html - 如何在h2之后放置具有固定宽度的居中边框底部？

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

代码

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

最佳答案

由于您有固定宽度的边框底部，您可以将其添加到 h2:after { :
margin-left: -50px;
想象一下 left: 50%; 将左边缘点移到中心。这意味着您的边框底部的最左端将位于中心点。这就是您需要执行 margin-left: -50px; 的原因。

这里有一些关于在 CSS 中居中的有用链接:

w3c

CSS-Tricks

工作示例:

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;
}

<h2>Something</h2>

关于html - 如何在h2之后放置具有固定宽度的居中边框底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36691230/