专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络
免费热线：400-683-0016      微信咨询  |  联系我们

伪元素如何实现鼠标移入时下划线展开特效_CSS学习

当前位置：网站建设 > 技术支持
资料来源：网络整理       时间：2023/3/4 2:26:15       共计：3564 浏览

伪元素如何实现鼠标移入时下划线展开特效？

完整代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>鼠标移入下划线展开</title>

<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>

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。
·上一条：公众号文章怎么使文字写在有花纹背景上面_CSS学习 | ·下一条：电脑上管理照片有何神器_CSS学习

Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有