hover从中间划线

发布于 2021-03-19  124 次阅读


思路: 通过给需要添加中间划线的元素after或before伪元素,给伪元素top:100%;right:50%;width:0%;
将伪元素放在元素中间,当鼠标移到元素上时,将伪元素设置为width:100%;right:0%;
伪元素就变成100%的宽度同时向右移动就达到向两边移动的效果.

代码:

<style>
        ul{
            width:100%;
            height: 100px;
            background-color: rgb(207, 136, 136);
            display: flex;
            align-items: center;
            justify-content:space-around;
        }
        ul li{
            width: 150px;
            text-align: center;
            list-style: none;
            position: relative;
            height: 40px;
            line-height: 40px;
            padding: 0 4px;
            cursor: pointer;
        }
        ul li:after{
            content: "";
            position: absolute;
            top: 100%;
            right: 50%;
            height: 3px;
            background-color:white;
            width: 0%;
            transition: all 0.3s ease-in-out;
        }
        ul li:hover:after{
            height: 3px;
            width: 100%;
            right: 0%;
        }
    </style>
</head>
<body>
    <ul>
        <li>王者荣耀</li>
        <li>英雄联盟</li>
        <li>穿越火线</li>
        <li>乱世王者</li>
        <li>哔哩哔哩</li>
    </ul>
</body>
</html>

效果:

  • 王者荣耀
  • 英雄联盟
  • 穿越火线
  • 乱世王者
  • 哔哩哔哩

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。