如何让标题下方的线条宽度与标题文本保持一致？

你遇到的问题很常见——默认情况下h2是块级元素，宽度会占满父容器的100%，所以不管你给伪元素设width: inherit还是100%，它都会跟着撑满整个容器，而不是只匹配文本的长度。下面给你两种实用的解决方案：

方法一：用span包裹文本（兼容性好） #

给标题文本套一个span标签，让伪元素绑定到span上，这样下划线就会跟着span的内容宽度走：

<h2><span>Hello world!</span></h2>

h2 span {
  position: relative;
  display: inline-block;
}
h2 span:after {
  content: "";
  position: absolute;
  bottom: -6px; /* 调整下划线和文本的间距 */
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #f77f00;
}

如果不想用绝对定位，也可以这样写：

h2 span {
  display: inline-block;
}
h2 span:after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: #f77f00;
  margin-top: 4px; /* 控制上下间距 */
}

方法二：不用额外标签（更简洁） #

利用display: table让h2的宽度自动适配文本内容，这样伪元素的100%宽度就会匹配文本长度，同时h2在页面中依然保持块级元素的换行特性：

<h2>Hello world!</h2>

h2 {
  display: table;
  position: relative;
}
h2:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #f77f00;
}

同样，不用绝对定位的写法：

h2 {
  display: table;
}
h2:after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: #f77f00;
  margin-top: 4px;
}

这两种方法都能完美实现你想要的效果，你可以根据自己的代码结构选择合适的方案~

内容的提问来源于stack exchange，提问作者Johnnybossboy