比如这里最终需求如下：
html代码：
<ul class="demo"> <li>Lady gaga</li> <li>Mariah Carey</li> <li>Adele</li> <li>Avril Lavigne</li> <li>Sarah Brightman</li> <li>Celine Dion</li> </ul>
方案一：
使用伪元素制作一个变宽，并定位在底部。
CSS代码：
.demo li {
padding-left: 15px;
line-height: 40px;
}
.demo li::after {
position: absolute;
rightright: 0;
bottombottom: 0;
left: 0;
border-bottom: 1px solid #ccc;
content: "\0020";
}
.demo li:not(:last-child)::after {
left: 15px;
}
.demo li:hover {
background-color: #f3f3f3;
}方案二：
so cool，使用背景图像（注意是图像）渐变，代码瞬间少了许多。(原文用background，我这里改回background-image方便理解)
.demo li {
padding-left: 15px;
line-height: 40px;
background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
}
.demo li:not(:last-child) {
background-position: 15px;
}
.demo li:hover {
background-color: #f3f3f3;
}方案三：
在第三种的基础上使用了background-origin
background-origin: border-box | padding-box | content-box
padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。
所以我们可以利用padding-box和content-box解析不同的背景图像（注意是图像）开始区域。来实现，代码如下：
.demo li {
padding-left: 15px;
line-height: 40px;
background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
background-origin:padding-box;/*background-origin默认值，可不写，我只是为了跟下面对比而已*/
}
.demo li:not(:last-child) {
background-origin:content-box;
}
.demo li:hover {
background-color: #f3f3f3;
}
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
