Html 如何制作；“之前”；李固定在李的底部？

我想在li标记前放置一个小矩形，该矩形应保持在li的底部，并且不受li内部html的影响：

这是我的密码：

<ul class="leftlist">
   <li>LOWEST <b>PRICE</b></li>
   <li><b>WAITING</b> for solutions</li>
   <li>ASKS “WHAT’S IN IT FOR <b>mE?</b>”</li>
   <li>SEEKING more <b>stuff</b></li>
   <li><b>trusts</b> marketing messageson the front OF THE BOX</li>
   <li><b>passive</b> recipient ofbrand communications</li>
 </ul>

ul有一个特定的宽度，所以当li文本大于宽度时，文本行将分解，并在第一行文本后面和其他行上方（而不是底部）生成“before”，如下所示 （见第五章）：

---

因此，我应该如何使“before”矩形始终位于li的底部？

您需要在伪元素上使用

position:absolute

，在父元素

li

上使用

position:relative

，以便仅在列表项

li

中进行绝对定位。然后调整顶部值

.leftlist{
列表样式类型：无；
}
李先生{
边框底部：1px实心#621a4b；
颜色：#621a4b；
边缘底部：25px；
位置：相对；/*添加*/
文本转换：大写；
}
.leftlist李：：之前{
颜色：#621a4b；
内容：“▄▄▄";
左：1px；
右边填充：10px；
位置：绝对；/*修改*/
顶部：10px；/*修改*/
}

最低价格

等待解决方案
问“这对我有什么好处？”
寻找更多的东西

在盒子的前面放一封信
品牌传播的被动接受者

试一试

将

position:relative

添加到li，并将此样式应用到

li:before:

.leftlist li:before {
content: "▄▄▄";
color: #621a4b;
position: absolute;
height: 9px;
bottom: 0;
}

.leftlist{

    list-style-type: none;
}

.leftlist li{
    padding-left:44px;
    border-bottom: 1px #621a4b solid;
    color: #621a4b;
    position:relative;
    text-transform: uppercase;
    margin-bottom: 25px;

}

.leftlist li:before{
    content: "";
    background: #621a4b;
    position: absolute;
    left: 0px;
    width:28px;
    height:9px;
    bottom:0px;
    padding-right: 10px;
}

.leftlist li:before {
content: "▄▄▄";
color: #621a4b;
position: absolute;
height: 9px;
bottom: 0;
}