css下划线自中间延伸

CSS下划线是一种常见的文本样式，常用于链接、标签和标题等元素上。传统的下划线从文本底部开始延伸，相对简单明了。但有时我们希望下划线自中间开始延伸，增强美感和视觉冲击力。

  .underline {
            display: inline-block;
            position: relative;
            text-decoration: none;
        }
        .underline:after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            bottom: -2px; /*下划线距离文本底部的距离*/
            width: 0;
            height: 2px;
            background-color: red; /*下划线颜色*/
            transition: width 0.2s ease-in-out; /*动画效果*/
        }
        .underline:hover:after {
            width: 100%; /*鼠标悬浮时下划线长度*/
            left: 0; /*下划线居中*/
        } 

以上是一段常用的CSS下划线代码，通过伪元素:after实现。具体来说，先设置文本元素为内联块级元素，以便处理下划线的位置。然后设置after伪元素的内容为空，定位到文本中间位置，设定下划线颜色、长度及动画效果。最后，在鼠标悬浮时修改下划线长度和位置，实现下划线自中间开始延伸的效果。

需要注意的是，下划线距离文本底部的距离、下划线宽度和动画效果等可以根据具体需求进行调整优化。同时还可以使用:before等其他伪元素实现不同风格的下划线效果。希望此篇文章可以对大家了解CSS下划线自中间延伸有所帮助！