css 下划线过渡效果 |网页鼠标经过css特效

a {
position: relative;
}
a:hover::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform .2s ease-out;
}
a:hover::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
transform: scaleX(0);
transform-origin: bottom left;
transition: transform .2s ease-out;
}
a:hover::before {
transform-origin: bottom left;
transform: scaleX(1);
}
a:hover::after {
transform-origin: bottom right;
transform: scaleX(1);
}

首先，在a标记样式中需要定义position: relative，这样在hover时，下划线元素才能相对于它进行定位。

其次，在a:hover::before和a:hover::after中，大家定义了content、position、width、height、bottom、left、background-color、transform、transform-origin、transition等样式属性。

content用于在标记文本中添加伪元素；position定义元素的定位方式；width、height、bottom、left用于设置元素的大小和位置；background-color设置下划线的颜色；transform、transform-origin和transition用于实现下划线过渡效果。

最后，在a:hover::before和a:hover::after之外，大家定义了a:hover::before和a:hover::after的transform-origin和transform属性，它们是下划线过渡效果的关键。

在实现这个下划线效果时，大家将下划线分成了左右两半，通过对两半分别进行变化，达到了下划线贴合文本并有过渡效果的目的。

总的来说，下划线过渡效果是一种比较简单的美化方式，能使文本更加动感且生动，是Web前端开发者必须掌握的基础知识之一。