css3下划线动画

CSS3是我们常用的样式表语言，它不仅可以实现静态页面的美化效果，还可以通过动画效果增加页面的互动性。其中，下划线动画是一种非常常用的效果，可以增加页面的可读性和美观度。

/* CSS样式表 */
a {
display: inline-block;
position: relative;
color: #333;
}
a:after {
content: "";
display: block;
height: 2px;
width: 0;
background-color: #333;
position: absolute;
bottom: -2px;
left: 0;
transition: width 0.3s ease;
}
a:hover:after {
width: 100%;
}

使用以上CSS代码可以实现下划线动画效果。首先定义a标签为块级元素，利用其包含后面的下划线元素（a:after）。下划线元素需要设置高度，颜色，并使用绝对定位放到a标签内的底部，left值设为0。然后设置一个过渡效果，在:hover时下划线的宽度会过渡到100%。

下划线动画是一种简单而有效的样式效果，可以增强页面的易读性和交互性。如果你想将它应用到你的网站上，可以直接使用以上代码作为参考。

查看更多关于css3下划线动画的详细内容...