Html Getting:after仅在文本下添加下划线，而不是整个容器

我想用

：after

方法在标题下面加下划线。我正在让它部分工作。我搞不懂的是如何使下划线（之后的

）仅位于
.slantTitleRap
内的span文本下方

有人知道我做错了什么吗


.slantBlock2Title{
颜色：#4d；
字体大小：1.5rem；
字体系列：“Muli”，无衬线；
线高：1.5em；
}
.斜标题RAP跨度：后{
内容：''；
显示：块；
宽度：40%；
边缘顶部：5px；
背景:"b82222 ;；
高度：2倍；
}

乌德林
我只添加了
位置
s，以使其按照您的要求工作：


.slantBlock2Title{
位置：相对；/*已添加*/
颜色：#4d；
字体大小：1.5rem；
字体系列：“Muli”，无衬线；
线高：1.5em；
}
.斜标题RAP跨度：后{
位置：绝对；/*已添加*/
内容：''；
显示：块；
宽度：100%；/*已修改*/
边缘顶部：5px；
背景:"b82222 ;；
高度：2倍；
}
p{
字体系列：“Muli”，无衬线；
}

在我下面画线


（我也添加了“n！”：D）
我只添加了
位置
s，以使其按照您想要的方式工作：


.slantBlock2Title{
位置：相对；/*已添加*/
颜色：#4d；
字体大小：1.5rem；
字体系列：“Muli”，无衬线；
线高：1.5em；
}
.斜标题RAP跨度：后{
位置：绝对；/*已添加*/
内容：''；
显示：块；
宽度：100%；/*已修改*/
边缘顶部：5px；
背景:"b82222 ;；
高度：2倍；
}
p{
字体系列：“Muli”，无衬线；
}

在我下面画线


（我也添加了“n！”：D）
您可以通过使用“display:inline block”来实现这一点


.slantBlock2Title{
颜色：#4d；
字体大小：1.5rem；
字体系列：“Muli”，无衬线；
线高：1.5em；
显示：内联块；
}
.斜标题RAP跨度：后{
内容：''；
显示：块；
宽度：100%；
边缘顶部：5px；
背景:"b82222 ;；
高度：2倍；
}

乌德林
您可以通过使用“显示：内联块”来实现这一点


.slantBlock2Title{
颜色：#4d；
字体大小：1.5rem；
字体系列：“Muli”，无衬线；
线高：1.5em；
显示：内联块；
}
.斜标题RAP跨度：后{
内容：''；
显示：块；
宽度：100%；
边缘顶部：5px；
背景:"b82222 ;；
高度：2倍；
}

乌德林
只是好奇——而不是
span:after
我可能会使用
边框底部
和
填充底部
，以获得所需的间距；例如
.slangblock2title{border bottom:2px solid}
只是好奇——而不是
span:after
我可能会用
边框底部
和
填充底部
，以获得所需的间距；例如
.slangblock2title{border bottom:2px solid}