如何在“外”前定位Li：：

Question

我想在psuedo元素之前对齐一个li：：就像在执行一个

列表样式位置：外部

null

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>

null

我想对齐突出显示的部分。

Answer 1

您可以使用列表样式代替pseudo和pseuddo::marker来重置颜色：

null

ul{
  width: 300px;
}

.cool-list li{
list-style: "\2716\0020"; /* add a white space ? */
}

li::marker {
  color: crimson; /* give a different color to the list marker ? */ 
}
.cool-list li.good {
list-style:"\2714\0020";
}
li.good::marker {
  color: green
}

html prettyprint-override"><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>

Answer 2

负余量可以做到这一点。

null

ul {
  width: 300px;
}

.cool-list li {
  list-style: none;
}

.cool-list li:before {
  content: "\2716";
  color: #000;
  margin-left: -20px;
}

html lang-html prettyprint-override"><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>