使用 after 伪元素来制作自定义样式的链接文本。
1. 文本本身的text-decoration是none;
2. 鼠标悬停到链接文本上时,通过after元素显示自定义样式的下划线;
3. 使用CSS3 width属性的transition渐变效果展示下划线伸长动画。
代码和在线演示:http://wow.techbrood.com/fiddle/1229
使用 after 伪元素来制作自定义样式的链接文本。
1. 文本本身的text-decoration是none;
2. 鼠标悬停到链接文本上时,通过after元素显示自定义样式的下划线;
3. 使用CSS3 width属性的transition渐变效果展示下划线伸长动画。
代码和在线演示:http://wow.techbrood.com/fiddle/1229