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

Question

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

这是我的 HTML:

<h2>Hello world!</h2>

这是我的 CSS:

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

我尝试过的:

• 设置伪元素的宽度为100%

• 宽度:在伪元素上继承

代码笔示例: https://codepen.io/johnnybossboy/pen/zjGdVr

Answer 1

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

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

// Remove pseudo element CSS