CSS

Question

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

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

结果： 我现在最接近的，边框跨越 parent 宽度。

<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，使红色边框仅跨越文本的宽度？

可能会有多行文本（小浏览器window/更长的标题）

Answer 1

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

h3 {
  border: solid 1px
}

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

<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>

CSS - 底部边框使用 :after pseudo-element 这是文本的长度

CSS - bottom border using :after pseudo-element that's the length of text

html

css-selectors

pseudo-class