如何将自定义 ::marker 用于列表并保留默认标记的水平间距？答案

【问题标题】：How can I use a custom ::marker for a list and preserve the horizontal spacing of the default marker?如何将自定义 ::marker 用于列表并保留默认标记的水平间距？
【发布时间】：2022-07-07 01:45:20
【问题描述】：

在下面的 sn-p 中，我使用了::marker 来更改列表项的标记。然而，间距并不是我想要的，因为标记离文本太近了。添加一些空间会有所帮助，但似乎是一种解决方法。

.good > *::marker {
  content: '\2713';
}
.good.spaced > *::marker {
  content: '\2713  ';
}

<ul class="good">
  <li>hello</li>
  <li>hello</li>
</ul>
<ul>
  <li>hello</li>
  <li>hello</li>
</ul>
<ul class="good spaced">
  <li>hello</li>
  <li>hello</li>
</ul>

【问题讨论】：

标签： html css alignment html-lists glyph

【解决方案1】：

使用 li 上的 padding-left 属性在标记和文本之间添加间距。

ul {
  list-style: none;
}

li {
  padding-left: .5rem;
}

li::marker {
  content: 'X';
}

<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<ul>

【讨论】：