鼠标放到链接上面有条下划线慢慢延伸的方法
作者:温州网站建设   发布时间:2016-10-31  浏览:

鼠标放到链接上面有条下划线慢慢延伸的方法,下面小编直接将代码写上来,希望可以帮助大家。

a:link{position relative;text-decoration: none;}
a:hover::after{width:100%}
a::after{display:block;position:absolute;content:"";left:0;width:0;height:2px;background-color:#03C;transition:width .6s ease-in}
 
延伸链接快点数字就调小点,延伸慢的话大家只需要将数字设置大一些就可以了。下面是效果图:
鼠标放到链接上面有条下划线慢慢延伸的方法
 
 
分享到:QQ空间新浪微博腾讯微博人人网微信
产品服务

欣网网络的小伙伴们随时为您待命