[分享]css中如何让下划线居中

在CSS中让下划线居中是一个很基础但又常见的需求。下面我们来介绍一下如何实现。

 .underline {
        text-decoration: underline;
        text-decoration-color: #000;
        text-decoration-thickness: 2px;
        text-underline-position: under;
    } 

以上代码中，我们使用了text-decoration来添加下划线，text-decoration-thickness用来控制下划线的粗细，text-decoration-color用来设置下划线的颜色。而text-underline-position用来设置下划线的位置。

在text-underline-position属性中，有两个值可选，分别是under和auto。

当值为under时，下划线会被置于文本的下方，并居中显示。

当值为auto时，下划线会被置于文本的底部，而不是中心。

综上所述，我们可以通过text-underline-position这个属性，让下划线居中显示，从而达到更好的美观效果。