效果图
<!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> </head> <style> * { margin: 0; padding: 0; list-style: none; } .menu-container { background: #eee; height: 50px; margin: 100px 0; } .main { width: 1200px; height: 50px; margin: 0 auto; line-height: 50px; } .flex { display: flex; align-items: center; /*垂直居中*/ } .main>div:first-child { height: 70px; width: 150px; background: rgb(2, 62, 85); color: #fff; transform: skew(-20deg); /*倾斜*/ font-size: 30px; line-height: 70px; text-align: center; user-select: none; /* 禁止用户选择 */ letter-spacing: 3px; /* 字体间距*/ } .main>ul>li { padding: 0 20px; margin: 0 10px; color: rgb(2, 62, 85); font-weight: bold; cursor: pointer; position: relative; } .main>ul>li:hover .line { transform: scale(1); /*显示还原 */ /* opacity: 1; */ } .line { height: 4px; background: rgb(2, 62, 85); width: 75px; position: absolute; left: 0; transform: scale(0); /*隐藏 */ /* opacity: 0;透明度 */ transition: 1s; /*过度1s*/ } </style> <body> <div class="menu-container"> <div class="main flex"> <div>课程栏目</div> <ul class="flex"> <li>语文 <div class="line"></div> </li> <li>数学 <div class="line"></div> </li> <li>英语 <div class="line"></div> </li> <li>历史 <div class="line"></div> </li> <li>体育 <div class="line"></div> </li> </ul> </div> </div> </body> </html>