两侧向中间闭合高亮效果-526互联

两个要点

1. z-index为任意值，包括负值，可实现与isolation: isolate;一样效果，生产独立的层级上下文

2. 绝对定位的元素scaleX宽度变化，扩大从中间向两侧扩大，缩小从两侧向中间缩小

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>两侧向中间高亮效果</title> 
    <style>
        li{
            position: relative;
            margin-top: 10px;
            background: lightblue;
            /* isolation: isolate; */
            z-index: 1;
        }
        li:before{
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #fff;
            transition: .3s ease-out;
        }
        li:hover{
            cursor: pointer;    
        }
        li:hover:before{
            transform: scaleX(0);
        }
    </style>
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</body>
</html>

可参考此文的右侧导航的高亮效果 JavaScript 如何将一个迭代器转化为一个数组