鼠标移入下划线展开 CSS3伪类

一 .鼠标移入下划线向两边展开

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

二.鼠标移入下划线由左向右展开

<!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: 5px;
 
            background: blue;
 
            position: absolute;
 
            top: 100%;
 
            left: 0%;
 
            transition: all .8s;
 
        }
 
        #underline:hover:after{
 
            left: 0%;
 
            width: 100%;
 
        }
 
    </style>
 
</head>
 
<body>
 
    <a href="#"><div id="underline">women</div></a>
 
</body>
 
</html>

　　

posted @ 2020-05-14 15:35  胡炖鱼  阅读(644)  评论(0)  编辑  收藏  举报