版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
思路
将伪元素: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方便进行别的操作