CSS 样式列表标记

Question

我将如何设置列表标记的样式？例如将其设置为不同的颜色、将其设置为粗体、更改大小等。是否可以像设置字体样式一样设置它的样式？

例如

这是一个列表项。

我可以定位“1”吗？特别是在不影响文本其余部分的情况下？

我知道有一些方法可以更改类型，例如将其设为罗马字体，或将其设为方形或使用 list-style-type 的任何其他方式，但这些似乎没有我想要的样式选项正在寻找。

Answer 1

为了实现有序列表项的样式，您同样需要使用伪元素和计数器。

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: my-counter;
}

ol li {
  position: relative;
  padding-left: 10px;
  counter-increment: my-counter;
}

ol li:before {
  content: counter(my-counter);
  display: inline-block;
  vertical-align: middle;
  color: red;
  margin-right: 10px;
}

<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

CSS 样式列表标记

CSS style list markers

css

styles

list

marker