css3下划线滑过效果

CSS3的下划线滑过效果可以让网站的界面更加美观和富有动态效果，下面我们来详细看一下如何实现这个效果。

/*CSS3下划线滑过效果*/
a {
  position: relative;
  color: #333333;
  text-decoration: none;
}

a:hover::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background-color: #333333;
  position: absolute;
  left: 0;
  bottom: -5px;
  transition: width 0.3s ease-in-out;
}

a:hover::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background-color: #333333;
  position: absolute;
  right: 0;
  bottom: -5px;
  transition: width 0.3s ease-in-out;
}

a:hover::after,a:hover::before {
  width: 50%;
}

css3下划线滑过效果

首先，我们需要给链接设置position: relative，这样我们才能给链接的:hover伪类设置position: absolute，使用绝对定位的方法来实现下划线的效果。

然后，我们设置:hover伪类下的::before和::after伪元素，来创建出两条下划线，这样可以增加整个滑过效果的酷炫感。这两个伪元素的content属性可以设置为空字符，表示它们不会出现任何文字，只会出现下划线。

接下来，我们设置这两个伪元素的宽度为0，并设置它们的高度和颜色。我们将这两个伪元素定位在链接的下边缘，并给它们添加一个向上的负方向偏移量，这样它们就不会和链接重叠了。

最后，我们设置:hover伪类下的::before和::after伪元素的宽度为50%。由于我们为这两个伪元素添加了CSS3过渡动画，它们的宽度会在0.3秒内从0逐渐变为50%，从而实现下划线滑过效果。

css3下划线滑过效果

相关文章