CSS-使用：after伪元素的下边界，即文本的长度

Question

我有一个<h3>，需要使用::after伪元素对其进行样式设置，使其后方包含一个红色的底部边框。

目标：红色的底部边框应仅显示文本的长度。

结果：我现在所拥有的距离最近，边框跨越了父级宽度。

<h3><span class="headingLine">Lorem Ipsum Dolor Sit Amet</span></h3>

span.headingLine:after{
  position: absolute;
  content: '';
  border-bottom: 7px solid red;
  z-index: -1;
  left: 0;
  width: 100%; /* If I remove the width 100%, the red doesn't show */
  bottom: 15px;
  display: inline-block;
}

我如何调整标记/ CSS，以使红色边框仅跨越文本的宽度？

可能存在多行文本的实例（浏览器窗口较小/标题较长）]] >>

我有一个

，我需要使用:: after伪元素来设置样式，使其后方包含一个红色的底部边框。目标：红色底边框应仅显示文本的长度。结果：...

] >>

您的方法过于复杂，只需使用渐变背景：

h1 {
  border: solid 1px
}

span {
  background: linear-gradient(0deg, red 6px, transparent 7px)
}

<h3><span class="headingLine">Lorem Ipsum Dolor Sit Amet</span></h3>
<h3><span class="headingLine">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet Dolor Sit Amet Dolor Sit Amet Dolor Sit Amet Dolor Sit Amet</span></h3>

Answer 1

您的方法过于复杂，只需使用渐变背景：