CSS3制作hover下划线动画

CSS3制作hover下划线动画

1、前几天看到Hexo的next主题标题hover效果很炫，自己尝试写了一个，另一个是next的实现，照例先上图

　　

2、实现小黑科技

1 <!-- html结构 -->
2 <div>
3     <a href="javascript:void(0);" class="demo1">自己实现的hover效果</a>
4 </div>

        /* css样式 */
        .demo1{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo1:before{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width