如何为标题添加比文本长约50像素的下划线？

直接用CSS伪元素::after就能搞定，这是比原生text-decoration更灵活的方案，具体代码如下：

HTML结构 #

<span class="long-underline">需要加超长下划线的文本</span>

CSS样式 #

.long-underline {
  position: relative;
  display: inline-block; /* 让伪元素基于文本宽度计算 */
}

.long-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; /* 调整下划线与文本的间距 */
  left: -25px; /* 向左延伸25px */
  right: -25px; /* 向右延伸25px，总共比文本长50px */
  height: 1px; /* 下划线的厚度 */
  background-color: #333; /* 下划线颜色，可自行修改 */
}

说明 #

• 用left: -25px和right: -25px让下划线左右各延伸25px，整体比文本长50px，视觉上更对称自然；
• 如果只需要单边加长（比如只向右），可以改成left: 0; right: -50px；
• 原生的text-decoration无法调整下划线长度，伪元素是目前最实用的解决方式。

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