纯CSS导航栏下划线跟随效果

最新推荐文章于 2024-05-15 09:45:51 发布

钢铁加lulu

最新推荐文章于 2024-05-15 09:45:51 发布

阅读量856

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u011295864/article/details/88527424

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS导航栏下划线跟随效果</title>
    <style>
        ul {
            list-style: none;
        }
        li {
            font-size: 20px;
            padding: 5px 15px;
            float: left;
            border-bottom: 0px solid #444444;
            cursor: pointer;
            position: relative;
        }
        li::before {
            content: '';
            position: absolute;
            top: 0;
            left: 100%;
            width: 0;
            height: 100%;
            border-bottom: 2px solid #2ca1f4;
            transition: 0.5s all linear;
        }
        li:hover {
            color: #2ca1f4;
        }
        li:hover::before {
            left: 0;
            width: 100%;
        }
        li:hover ~ li::before {
            left: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>Hello</li>
        <li>Good Morning</li>
        <li>PHP是世界上最好的语言</li>
        <li>Do you think so？</li>
        <li>Fine</li>
    </ul>
</body>
</html>

钢铁加lulu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯CSS导航栏下划线跟随效果

代码如下&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯CSS导航栏下划线跟随效果&lt;/title&gt; &lt;style&gt; ul {
复制链接

扫一扫

专栏目录