CSS片段
<style>*{margin: 0;padding: 0;box-sizing: border-box;}div{ /*不重要*/width: 400px;height: 500px;margin: 100px auto;padding: 50px 100px;;border-radius: 5px;background-color: black;}li{position: relative;width: 200px;height: 50px;padding: 10px 0 0 20px;margin-top: 20px;border:3px solid white;background-color: black;color: white;list-style: none;transition: .3s linear;}li:hover{transform: scale(1.05); /*盒子放大*/box-shadow:0 0 15px aqua; /*通过盒子阴影设置'发光效果'*/}li::before, li::after{position: absolute;width: 40px;height: 3px;background-color:black;content: '';transition: 1.3s ease-out ;visibility: hidden; /*线条隐藏*/}li::before{ /*设置线条初始位置*/top:-3px;left:0%;}li::after{ /*设置线条初始位置*/bottom:-3px;right:0%;}li:hover::before{top:-3px;left: 154px;/*根据情况设定你想让线条停在何处*/visibility: visible; /*线条展示*/}li:hover::after{bottom:-3px;right: 154px; /*根据情况设定你想让线条停在何处*/visibility: visible; /*线条展示*/}</style>
HTML片段
<body><div><ul><li>炎龙侠</li><li>黑犀侠</li><li>地虎侠</li><li>风鹰侠</li><li>雪獒侠</li></ul></div></body>
