css下划线居中缩短

在网页设计中，下划线是一种常见的装饰性符号。而通过CSS，我们可以实现下划线的样式、位置等多方面的控制。本文将重点讲解如何实现居中缩短的下划线。

<span class="underline">一段文本</span> 

在上述代码中，我们给文本加入下划线，并使用underline类名进行样式控制。接下来，我们为这个类名加入CSS样式：

.underline {
    text-decoration: none;  /*去除默认下划线*/
    position: relative;
    display: inline-block;
}
.underline::before {
    content: "";   /*伪元素*/
    width: 50%;    /*下划线长度*/
    height: 1px;   /*下划线粗细*/
    background-color: black;   /*下划线颜色*/
    position: absolute;
    bottom: -2px;   /*下划线位置*/
    left: 25%;     /*下划线居中*/
} 

我们可以逐行解释以上CSS代码：

1、text-decoration: none;用来去除默认的下划线。

2、position: relative;和display: inline-block;共同为后面的伪元素提供定位的基准。

3、.underline::before为伪元素，用来现实下划线。同时，通过设置其宽度、高度、颜色等属性来调整下划线的样式。

4、bottom: -2px;用来将下划线定位到文本底部。通过微调这个数值，可以实现合适的下划线位置。

5、left: 25%;用来将下划线居中。如果需要调整下划线左右偏移的位置，可以通过改变这个百分比值来实现。

通过以上的CSS代码，我们就可以实现居中缩短的下划线效果了。当然，如果需要应用到其他文本中，只需要另外添加underline类名就可以了。