<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul { display: flex; } li { position: relative; padding: 20px; transition: 0.2s all linear; cursor: pointer; list-style: none; } li::before { content: ''; position: absolute; top: 0; left: 100%; width: 0; height: 100%; border-bottom: 2px solid #000; transition: 0.2s all linear; } li:hover::before { width: 100%; left: 0; top: 0; transition-delay: 0.1s; border-bottom-color: #000; z-index: -1; } li:hover~li::before { left: 0; } li:active { background-color: #000; color: #fff; } </style> </head> <body> <ul> <li>导航栏1</li> <li>导航栏2</li> <li>导航栏3</li> <li>导航栏4</li> <li>导航栏5</li> </ul> </body> </html>