码迷,mamicode.com
首页 > Web开发 > 详细

[HTML/CSS]导航栏的下划线跟随效果

时间:2018-04-26 11:53:23      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:round   near   ext   .com   htm   lang   col   src   hover   

技术分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>纯CSS导航栏下划线跟随效果</title>
 8 </head>
 9 <style>
10     *{
11         margin: 0;
12         padding: 0;
13     }
14     html,
15     body{
16         width: 100%;
17         height: 100%;
18     }
19     ul{
20         display: flex;
21         position: absolute;
22         top: 50%;
23         left: 50%;
24         transform: translate(-50%, -50%);
25     }
26     li{
27         position: relative;
28         padding: 1em 2em;
29         font-size: 24px;
30         list-style: none;
31         white-space:nowrap; 
32     }
33     li::after{
34         content: ‘‘;
35         position: absolute;
36         bottom: 0;
37         width: 0;
38         height: 2px;
39         background-color: #000;
40         transition: .5s all linear;
41     }
42     li:hover::after{
43         width: 100%;
44     }
45     li::after{
46         left: 100%;     /*选中项上一个下划线收回的方向,从左往右收线*/
47     }
48     li:hover::after{
49         left: 0;      /*选中项下划线出线的方向,从左往右出线*/
50     }
51     li:hover ~ li::after {
52         left: 0;    /*选中项下一个下划线出线的方向,从左往右收线*/
53     }
54 </style>
55 <body>
56     <ul>
57         <li>纯CSS导航栏</li>
58         <li>导航菜单项</li>
59         <li>被划过</li>
60         <li>下划线跟随</li>
61     </ul>
62 </body>
63 </html>

 

[HTML/CSS]导航栏的下划线跟随效果

标签:round   near   ext   .com   htm   lang   col   src   hover   

原文地址:https://www.cnblogs.com/SoYang/p/8948290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!