CSS3绘制有活力的链接下划线

CSS Code复制内容到剪贴板

h2 > a {   
      position: relative;   
      color: #000;   
      text-decoration: none;   
}   
  
h2 > a:hover {   
      color: #000;   
}       
  

接下来，我们要添加border，通过变换隐藏它。插入一个:before并且设置它scaleX（0），保守起见，如果浏览器不支持，我们通过visibility: hidden隐藏它。

CSS Code复制内容到剪贴板

h2 > a:before {   
      content: "";   
      position: absolute;   
      width: 100%;   
      height: 2px;   
      bottombottom: 0;   
      left: 0;   
      background-color: #000;   
      visibility: hidden;   
      -webkit-transform: scaleX(0);   
      transform: scaleX(0);   
      -webkit-transition: all 0.3s ease-in-out 0s;   
      transition: all 0.3s ease-in-out 0s;   
}   
  

最后设置动画时间为0.3s，现在我们只需要设置元素在hover时显示并且scaleX(1)：

CSS Code复制内容到剪贴板

h2 > a:hover:before {   
      visibility: visible;   
      -webkit-transform: scaleX(1);   
      transform: scaleX(1);   
}  

大功告成！

这样就完成了一个很有活力的下划线动画。