css下划线比文本长

在CSS中，实现下划线比文本长的效果是一种常见的需求。这种效果可以使文本看起来更加突出，更加醒目。下面我们来看一下如何实现这种效果。

text-decoration: underline;
text-underline-position: under; 

首先，我们需要使用CSS中的text-decoration属性来设置下划线样式。将其设置为underline后，就可以给文本添加下划线了。

接下来，我们可以使用text-underline-position属性来调整下划线的位置。默认情况下，下划线是与文本的基线对齐的，这种情况下下划线比文本短。而如果我们将其设置为under，则可以让下划线从文本底部开始，延伸到文本的下方，从而实现下划线比文本长的效果。

.text {
    text-decoration: underline;
    text-underline-position: under;
} 

当我们需要给某个元素添加下划线时，直接在该元素上添加以上两条CSS规则即可。