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>
原文地址：https://www.cnblogs.com/SoYang/p/8948290.html
时间： 2024-08-04 10:36:52