如何让CSS :after伪元素仅在文本下方添加下划线而非整个容器

我尝试用:after伪元素给标题添加下划线，现在已经实现了部分效果，但下划线没办法只出现在.slantTitleWrap容器内的span文本下方。请问我哪里操作错了？

我的相关CSS代码如下：

.slantBlock2Title { 
  color: #4D4D4D; 
  font-size: 1.5rem; 
  font-family: 'Muli', sans-serif; 
  line-height: 1.5em; 
} 
.slantTitleWrap span:after { 
  content: ''; 
  display: block; 
  width: 40%; 
  margin-top: 5px; 
  background: #b82222; 
  height: 2px; 
}

嘿，这个问题大概率是因为你给:after伪元素设置了display: block，同时span默认是行内元素——行内元素的块级伪元素不会贴合文本宽度，反而会继承父块级容器的可用宽度，所以下划线才会超出文本范围。

给你几个实用的解决办法：

方案一：将span设为行内块元素 #

让span的宽度贴合文本内容，这样伪元素的40%宽度就会基于文本宽度计算，下划线自然就只出现在文本下方：

.slantTitleWrap span {
  display: inline-block;
}
.slantTitleWrap span:after { 
  content: ''; 
  display: block; 
  width: 40%; 
  margin-top: 5px; 
  background: #b82222; 
  height: 2px; 
}

方案二：修改伪元素的显示类型 #

把伪元素改成inline-block，让它跟文本处于同一流中，宽度基于文本的相对比例：

.slantTitleWrap span:after { 
  content: ''; 
  display: inline-block;
  width: 40%; 
  margin-top: 5px; 
  background: #b82222; 
  height: 2px;
  vertical-align: bottom; /* 让下划线与文本底部对齐 */
}

方案三：使用绝对定位精准控制 #

通过给span设置相对定位，伪元素用绝对定位来固定下划线的位置，这种方式灵活性更高：

.slantTitleWrap span {
  position: relative;
  padding-bottom: 8px; /* 给下划线预留空间 */
}
.slantTitleWrap span:after { 
  content: ''; 
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%; 
  background: #b82222; 
  height: 2px; 
}

核心逻辑就是让伪元素的宽度参考对象变成span的文本宽度，而不是父容器的宽度，调整后就能实现你想要的效果啦！

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