css3+伪元素实现鼠标移入时下划线向两边展开的效果

2020-05-05 07:47:17易采站长站整理

<style type="text/css">

#underline{

width: 200px;

height: 50px;

background: #ddd;

margin: 20px;

position: relative;

}

#underline:after{

content: "";

width: 0;

height: 5px;

background: blue;

position: absolute;

top: 100%;

left: 50%;

transition: all .8s;

}

#underline:hover:after{

left: 0%;

width: 100%;

}

</style>

</head>

<body>

<div id="underline"></div>

</body>

</html>

总结

关于才疏学浅,以后遇到了再补充。好了以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对软件开发网的支持。