完整示例 / 原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不可思议的CSS光标下划线跟随效果</title>
</head>
<style>
    ul {display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    li {position: relative; list-style: none; padding: 20px; font-size: 24px; color: #000; line-height: 1; transition: 0.2s all linear; cursor: pointer; }

    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%;
        top: 0;
        left: 0;
        transition-delay: 0.1s;
        border-bottom-color: #000;
    }

    li:hover ~ li::before {
        left: 0;
    }
</style>
<body class="home">
    <ul>
      <li>不可思议的CSS</li> 
      <li>导航栏</li> 
      <li>光标下划线跟随</li> 
      <li>PURE CSS</li> 
      <li>Coco</li> 
    </ul>
</body>
</html>

老实说，我觉得这样也蛮好看的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不可思议的CSS光标下划线跟随效果</title>
</head>
<style>
    ul {display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    li {position: relative; list-style: none; padding: 20px; font-size: 24px; color: #000; line-height: 1; transition: 0.2s all linear; cursor: pointer; }

    li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-bottom: 2px solid #000;
        transition: 0.2s all linear;
    }

    li:hover::before {
        width: 100%;
    }
</style>
<body class="home">
    <ul>
      <li>不可思议的CSS</li> 
      <li>导航栏</li> 
      <li>光标下划线跟随</li> 
      <li>PURE CSS</li> 
      <li>Coco</li> 
    </ul>
</body>
</html>

results matching ""

    No results matching ""