当 list-marker 是伪元素时，list-style-position 不起作用。为什么？

Question

我想为 <ul> 创建彩色列表标记并且我做到了，但是现在在所有列表中 list-style-position 属性都不起作用。

代码如下：

ul.FirmStyle {
  list-style-type: none;
}
ul.FirmStyle li:before {
  color: orange;
  content: "▪";
  list-style-position: outside;
  /* !!!!!! */
  margin-left: 10px;
}

<ul class="FirmStyle">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>

为什么？

Answer 1

根据W3C Specs，list-style-position 属性控制标记伪元素在列表项中的位置。

list-style-position

This property helps control the position of the ::marker pseudo-element in the list item.

Note: Note that a marker is only generated if the used value of the content property for the ::marker pseudo-element is not none.

只有当它的内容为none时才会生成此标记，但是一旦将list-style-type设置为none，标记的内容将默认为none。由于没有创建标记，因此没有任何位置。

list-style-type

none

The list item’s marker’s default contents are none.

^{（重点是我的）}

您必须使用 position 属性手动定位 :before pseudo-element（或）相应地调整左右边距。下面的代码片段包含有关如何使用边距或定位实现它的示例（以及带有 list-style-position 的输出以供比较）。

ul.FirmStyle{
  list-style-type: none;
}
ul.FirmStyle li:before{
  color: orange; 
  content: "▪";
}
ul.FirmStyle.with-margin li:before{
  margin: 0px 12px 0px -16px;
}
ul.FirmStyle.with-position li:before{
  position: relative;
  left: -16px;
}
ul.FirmStyle2{
  list-style-position: outside;
}

<ul class="FirmStyle with-margin">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>
<ul class="FirmStyle2">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>
<ul class="FirmStyle with-position">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>

Answer 2

咬晚了，但我也遇到了同样的问题！

对伪元素执行以下操作：

ul.FirmStyle li:before {
  color: orange;
  content: "▪";
  margin-left: -25px;  /* this is to move the icon left */
  padding-right: 10px; /* to keep some space between icon and text */
}

你不需要 list-style-position: outside;

当 list-marker 是伪元素时，list-style-position 不起作用。为什么？

list-style-position does not work when list-marker is pseudo-element. Why?

html

css

html-lists