css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>纯CSS导航栏下划线跟随效果</title>
 6 </head>
 7 <style>
 8 ul {
 9     display: flex;
10     position: absolute;
11     width: 800px;
12     top: 50%;
13     left: 50%;
14     transform: translate(-50%, -50%);
15 }
16 
17 li {
18     position: relative;
19     padding: 20px;
20     font-size: 16px;
21     color: #000;
22     line-height: 1;
23     transition: 0.2s all linear;
24     cursor: pointer;
25     list-style: none;
26 }
27 
28 li::before {
29     content: "";
30     position: absolute;
31     top: 0;
32     left: 100%;
33     width: 0;
34     height: 100%;
35     border-bottom: 2px solid #000;
36     transition: 0.2s all linear;
37 }
38 
39 li:hover::before {
40     width: 100%;
41     top: 0;
42     left: 0;
43     transition-delay: 0.1s;
44     border-bottom-color: #000;
45     z-index: -1;
46 }
47 li:hover ~ li::before {
48     left: 0;
49 }
50 li:active {
51     background: #000;
52     color: #fff;
53 }
54 </style>
55 <body>
56 <ul>
57   <li>不可思议的CSS</li>
58   <li>导航栏</li>
59   <li>光标小下划线跟随</li>
60   <li>PURE CSS</li>
61   <li>Nav Underline</li>
62 </ul>
63 </body>
64 </html>