利用伪元素和css3实现鼠标移入下划线向两边展开效果

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43624878/article/details/102714774

思路
将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。

实现过程：
下面是我实现某官网首页导航中a链接时做的简单特效的过程。须知：a链接是行（内）元素，而行元素是没有width的！
所以，我们要实现题目所说特效，就要为每个a标签嵌套一个“盒子”——div最好（因为它最“干净”）
当然，如果你实现的是列表（li）的话，把它 display:block;或display:inline-block;即可。

比如这样：

<div id="underline">
    <a href="#">孟笑晨</a>
</div>

在css中，利用after伪元素设置底部下划线 ——通过position:absolute;将其固定在“父元素div”的底部（事实上，“ 父相子绝 ”后如果不设置top和left等属性，after伪元素默认紧贴在父元素末尾）

		#underline{
          width: 110px;
            height: 50px;
            margin: 20px;
            position: relative;
        }
        #underline>a{
            color: lightgrey;
            /* 必须有下面这三行：这可以让此“div”移到父级的中央（而不是中心与中心重合） */
            position: absolute;
            top: 50%;
            left: 50%;
            cursor: pointer;
            /* 然后再去位移 —— 上面往哪偏，这里往回移。   （正百分比是往右、下） */
            transform: translate(-50%,-50%);
        }
        #underline:after{
            content: "";
            width: 0;
            height: 2px;
            background: rgb(255,170,0);
            position: absolute;
            top: 100%;
            left: 50%;
            transition: all .5s;
        }
        #underline:hover:after{
            left: 0;
            width: 100%;
        }

像这样我们只定义了 :after 伪元素，将其从距离左边50%宽度为0的同时改变成距离左边0%宽度为100%就可以实现，这比同时设置before和after就达到了精简代码的目的，而且还多余出了:before方便进行别的操作