css下划线只划文字

CSS中的下划线是一种常见的文本修饰方式，通常用于强调某些信息或者制作下划线链接。但是有时候我们需要实现一个只划文字而不占据整个元素的下划线效果，该如何实现呢？

这里我们可以采用伪元素（:after或:before）和属性选择器的结合，为指定的文本添加下划线样式。下面是一个简单的示例代码：

p[data-underline] {
    position: relative;
}

p[data-underline]:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
}

p[data-underline] span {
    position: relative;
    z-index: 1;
} 

在这个示例中，我们为带有"data-underline"属性的p元素添加了一个:after伪元素，并设置其宽度为100%、高度为1px、颜色为黑色。同时，我们再为该元素的子元素span设置了一个较高的z-index属性，让它在下划线之上显示。

最后，我们只需要在需要添加下划线的文本处添加一个带有"data-underline"属性的p元素，并在其中嵌套一个元素（可以是span、a、em等），就能轻松地实现只划文字而不占据整个元素的下划线效果了。