css实现导航栏下划线向两边展开效果

最新推荐文章于 2021-12-17 13:49:20 发布

荒年1010

最新推荐文章于 2021-12-17 13:49:20 发布

阅读量272

点赞数 1

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_42673485/article/details/118116998

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css实现导航栏下划线向两边展开效果</title>
    <style>
        ul {
            height: 80px;
            line-height: 80px;
            top: -30px;
            list-style: none;
            margin: 0 auto;
            width: 380px;
        }

        ul>li {
            float: left;
            height: 80px;
            font-size: 14px;
            margin-right: 30px;
            /* 设置relative,作为伪类::after定位的参照和width的参照基准 */
            position: relative;
            padding: 0 5px;
        }

        ul>li::before,
        ul>li::after {
            content: '';
            /* 将开始的宽度设置为0,这样才会展示出过渡效果 */
            width: 0;
            height: 2px;
            background-color: #0f0f0f;
            /* 设置原本定位 */
            position: absolute;
            top: 99%;
            left: 50%;
            /* 设置过渡效果 */
            transition: all 0.8s;
        }

        ul>li:hover::before {
            /* 实现向左展开效果 */
            /* 鼠标移入改变宽度 */
            width: 50%;
            /* 鼠标移入改变定位位置 */
            left: 0px;
        }
        /* 同上 */
        ul>li:hover::after {
            width: 50%;
            right: 0px;
        }
    </style>

</head>

<body>
    <ul>
        <li>手机</li>
        <li>电脑</li>
        <li>平板</li>
        <li>智慧屏</li>
        <li>穿戴</li>
    </ul>
</body>

</html>

荒年1010

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现导航栏下划线向两边展开效果

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css实现导航栏下划线向两边展开效果</title> <style> ul { height: 80px; line-height: 80px;
复制链接

扫一扫