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

<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>
版权声明：本文为qq_42673485原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。