代码实现css鼠标经过元素下划线两边展开效果
程序员文章站
2022-04-13 10:48:43
...
这篇文章主要介绍了代码实现css鼠标经过元素下划线两边展开效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
<!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: 1px; background: blue; position: absolute; top: 100%; left: 50%; transition: all .8s; } #underline:hover:after{ left: 0%; width: 100%; } </style> </head> <body> <p id="underline"></p> </body> </html>
相关推荐:
以上就是代码实现css鼠标经过元素下划线两边展开效果的详细内容,更多请关注其它相关文章!