下划线 CSS 动画 - CSS

在网页设计中，动效一般可以用CSS来实现。其中之一就是下划线动画。

实现方法

使用伪类:after来实现

.element:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  z-index: -1;
  height: 2px;
  width: 0;
  background: #000;
  transition: width 0.3s ease;
}

.element:hover:after {
  width: 100%;
}

这个例子中，在鼠标移入时，:after元素的宽度从0到100%缓慢变化，而却不占用原本的布局空间。

参数解析

• content - 生成的内容，默认为none
• position - 定位方式，默认为static
• left, right, top, bottom - 定位到相应的方向上，可值为auto
• z-index - z轴的层级
• height - 元素高度
• width - 元素宽度
• background - 元素背景颜色
• transition - 变换效果

总结

总的来说，下划线CSS动画可以为网站增加活力和动感，同时又不影响原来的布局空间。