[分享]css中实现下划线变长

CSS中实现下划线变长可以通过伪元素::after来实现。我们可以通过伪元素创建一个下划线，并将其宽度设置为0，通过transition属性实现下划线变长的效果。.example{ : relativ...

CSS中实现下划线变长可以通过伪元素::after来实现。我们可以通过伪元素创建一个下划线，并将其宽度设置为0，通过transition属性实现下划线变长的效果。

.example{
   position: relative;
}
.example::after{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -2px;
   height: 2px;
   background-color: #333;
   width: 0;
   transition: width 0.3s ease-in;
}
.example:hover::after{
   width: 100%;
} 

在上述代码中，我们首先在.example元素上设置相对定位，为伪元素的绝对定位提供参照物。

接着，我们使用::after来创建一个高度为2像素、颜色为#333的下划线，并使其位于.example元素的底部。我们通过将其宽度设置为0来隐藏下划线。

最后，我们通过使用:hover伪类选择.example元素，并将::after的宽度设置为100%，从而实现下划线变长的效果。我们使用transition属性来使下划线变长效果更加平滑。

总之，通过使用伪元素和transition属性，我们可以轻松实现下划线变长的效果，这为网页设计中的文本链接增添了一份动态美感。