在<LI>标记中包含CSS项目符号

Question

我做了一个小提琴来展示这个问题：https : //jsfiddle.net/1xum5Lce/4/

HTML：

<ul class="font anim">
  <li class="bckA">Hello</li>
  <li class="bckB">World</li>
</ul>

CSS：

.bckA {
  background-color: #FFFFAA;
}

.bckB {
  background-color: #AAFFFF;
}

.anim li {
  transition: all 200ms;
  transform-origin: left;
}

.anim li:hover {
  transform: scale(1.5);
  box-shadow: 0px 0px 10px #000000;
}

.font {
  font-size: 36px;
  display: list-item;
  list-style-type: decimal;
}

悬停时的背景颜色和阴影仅覆盖标签，并且变换源位于项目符号和标签之间。

我需要将子弹包含在所有这些内容中。

请注意，由于<LI>标签会动态更改其顺序，因此我不想手动添加编号。此外，在换行过程中，将子弹物理地放置在里面并不能正确处理页边距。

最好的方法是什么？

Answer 1

使用列表样式位置用的价值inside，如果你想包括里面的子弹li元素：

.bckA {
  background-color: #FFFFAA;
}

.bckB {
  background-color: #AAFFFF;
}

.anim li {
  transition: all 200ms;
  transform-origin: left;
}

.anim li:hover {
  transform: scale(1.5);
}

.font {
  font-size: 36px;
  list-style-type: decimal;
  list-style-position: inside;  
}

<ul class="font anim">
  <li class="bckA">Hello</li>
  <li class="bckB">World</li>
</ul>

如果您使用出现多行问题list-style-position: inside，则可以使用多余/伪元素作为标记，而不是使用默认列表标记。要跟踪列表项，可以使用css counters。