Question

我想在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>

的CSS：

.leftlist{

    list-style-type: none;
}

.leftlist li{

    border-bottom: 1px #621a4b solid;
    color: #621a4b;
    text-transform: uppercase;
    margin-bottom: 25px;

}

.leftlist li:before{

    content: "▄▄▄";
    color: #621a4b;
    position: relative;
    left: 1px;
    top: 1px;
    padding-right: 10px;
}

ul具有特定的宽度，因此当li文本大于宽度时，文本行将分解并在＆＃34;之前生成＆＃34;在第一个文本行的后面和其他行的上方，而不是在底部，这是它的样子（见第五章）： jsfiddle

所以我应该做些什么来制作＆＃34;之前＆＃34;矩形始终位于li的底部？

Answer 1

您需要在伪元素上使用position: absolute，在父元素position: relative上使用li，以便仅在列表项li内完成绝对定位。之后调整最高值。

Updated JSfiddle

.leftlist {
  list-style-type: none;
}
.leftlist li {
  border-bottom: 1px solid #621a4b;
  color: #621a4b;
  margin-bottom: 25px;
  position: relative; /* Add */
  text-transform: uppercase;
}
.leftlist li::before {
  color: #621a4b;
  content: "▄▄▄";
  left: 1px;
  padding-right: 10px;
  position: absolute; /* Modify */
  top: 10px; /* Modify */
}

<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>

Answer 2

https://jsfiddle.net/rL89L4uo/2/

.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;
}

Answer 3

尝试this

将position: relative添加到li，并将此样式应用于li:before:

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

如何制作＆＃34;之前＆＃34; li固定在li的底部？

3 个答案: