先上张图，如何使用纯 CSS 制作如下效果？
在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。
OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？
1. <ul>
2. <li>不可思议的CSS</li>
3. <li>导航栏</li>
4. <li>光标下划线跟随</li>
5. <li>PURE CSS</li>
6. <li>Coco</li>
7. </ul>
CSS
1. ul {
2. display: flex;
3. position: absolute;
4. width: 800px;
5. top: 50%;
6. left: 50%;
7. transform: translate(-50%, -50%);
8. }
9.
10. li {
11. position: relative;
12. padding: 20px;
13. font-size: 24px;
14. color: #000;
15. line-height: 1;
16. transition: 0.2s all linear;
17. cursor: pointer;
18. }
19.
20. li::before {
21. content: "";
22. position: absolute;
23. top: 0;
24. left: 100%;
25. width: 0;
26. height: 100%;
27. border-bottom: 2px solid #000;
28. transition: 0.2s all linear;
29. }
30.
31. li:hover::before {
32. width: 100%;
33. top: 0;
34. left: 0;
35. transition-delay: 0.1s;
36. border-bottom-color: #000;
37. }
38.
39. li:hover ~ li::before {
40. left: 0;
41. }
42.
43. li:active {
44. background: #000;
45. color: #fff;
46. }