css下划线长度比文字短

在CSS中，我们经常会使用下划线来强调某个文本，但是你是否注意到下划线的长度比文本本身短呢？

span {
    text-decoration: underline;
    text-decoration-color: #333;
    text-underline-position: under;
} 

在上述代码中，我们使用了文本装饰的属性来添加下划线，其中text-decoration用于添加下划线，text-decoration-color用于指定下划线颜色，text-underline-position用于指定下划线位置。

在默认情况下，下划线的位置是在文字的下方，即text-underline-position的值为under。此时，下划线的长度比文本本身短，这是因为浏览器默认会将下划线往上移动一点点。

如果我们将text-underline-position的值设置为auto，则可以让下划线的长度与文本相同，但是这样下划线就会覆盖住文本的下方一点点。

因此，在实际使用中，我们还是可以将下划线的长度设置为比文本短一点点，这样可以更加美观。

span {
    text-decoration: underline;
    text-decoration-color: #333;
    text-underline-position: under;
    text-underline-offset: 2px;
} 

在上述代码中，我们添加了一个text-underline-offset属性，用于指定下划线的偏移量。2px的偏移量可以让下划线的长度比文本短一点点，同时也不会覆盖到文本的下方。

因此，在使用CSS添加下划线时，我们需要注意下划线的长度，让它既能够强调文本，又能够保持美观。