CSS下划线是一种常见的文本样式,常用于链接、标签和标题等元素上。传统的下划线从文本底部开始延伸,相对简单明了。但有时我们希望下划线自中间开始延伸,增强美感和视觉冲击力。 .underline { d
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下划线自中间延伸有所帮助!
粉丝
0
关注
0
收藏
0