利用css实现鼠标经过元素,下划线由中间向两边展开

来源:互联网 发布:微赢专业数据代理平台 编辑:程序博客网 时间:2024/04/29 00:51

代码如下:

<!DOCTYPE html><html lang="en"><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>    <div id="underline"></div></body></html>