如何使标题下方的线条与文本的宽度相同？

Question

如何确保标题下方的行与文本本身的长度相同？

这是我的HTML：

<h2>Hello world!</h2>

这是我的CSS：

h2:after {
  content: " ";
  display: block;
  width: inherit;
  height: 4px;
  background-color: #f77f00;
  color: #f77f00;
}

我尝试过：

• 将伪元素的宽度设置为100％

• width：继承伪元素

CodePen示例： https://codepen.io/johnnybossboy/pen/zjGdVr

Answer 1

您可以将其设置为inline-block并完全摆脱伪元素。

h2{
    display: inline-block;
    border-bottom: 4px solid #f77f00;
}

// Remove pseudo element CSS

Answer 2

在display: inline-block

上使用h2

h2{
  display: inline-block;
}