CSS - 项目符号和列表之间的空格而不填充列表

Question

我花费数小时在互联网上寻找解决方案。我的问题似乎没有答案。

我使用这样的简单列表：

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

我的 list-style-type 是 lower-alpha 。直到那里它是非常基本的。

问题：list-style-type 未与我的网格对齐。

问题：如何偏移list-style-type，以便在不触及<li> 的填充的情况下向左创建20px 的空间？ 我在互联网说要为<li> 添加填充，并在需要时创建补偿以粘贴网格。

我想实现这个：

到

Answer 1

你考虑过使用伪元素吗？

此过程可以完全控制子弹的位置和形状。

li {
  list-style: none;
  position: relative;
}

li::before {
  content: '•';
  position: absolute;
  left: -30px;
}

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

带有增量字符的项目符号

li {
  list-style: none;
  position: relative;
  counter-increment: Count;
}

li::before {
  content: counter(Count, lower-alpha) ".";
  position: absolute;
  left: -30px;
}

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

带有增量整数的项目符号

li {
  list-style: none;
  position: relative;
  counter-increment: Count 1;
}

li::before {
  content: counter(Count) ")";
  position: absolute;
  left: -30px;
}

<ul class="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>