如何定位 li：：在"外面"之前

Question

我想像在做一样，在psuedo元素之前对齐li：

列表样式位置：外部

ul{
width: 300px;
}
.cool-list li{
list-style: none;
}
.cool-list li:before{
content:"2716";
color: #000;
}

<ul class="cool-list">
<li> item</li>
<li> One 'problem' with the Guardian's method <span style="background-color: yellow">is list items</span>  </li>
<li> Item </li>
<li> Item </li>
</ul>

我想对齐高亮显示的部分。

Answer 1

负裕度可以做到这一点。

ul {
width: 300px;
}
.cool-list li {
list-style: none;
}
.cool-list li:before {
content: "2716";
color: #000;
margin-left: -20px;
}

<ul class="cool-list">
<li> item</li>
<li> One 'problem' with the Guardian's method <span style="background-color: yellow">is list items</span> </li>
<li> Item </li>
<li> Item </li>
</ul>

Answer 2

您可以使用list-style而不是伪::marker来重置颜色：

ul{
width: 300px;
}
.cool-list li{
list-style: "2716020"; /* add a white space ? */
}
li::marker {
color: crimson; /* give a different color to the list marker ? */ 
}
.cool-list li.good {
list-style:"2714020";
}
li.good::marker {
color: green
}

<ul class="cool-list">
<li> item</li>
<li> One 'problem' with the Guardian's method <span style="background-color: yellow">is list items</span>  </li>
<li class="good"> Item </li>
<li> Item </li>
</ul>