CSS样式列表标记[关闭]

Question

我如何设计列表标记的样式？比如使它变成不同的颜色，使它变粗，改变大小等。是否可以像设计字体样式一样设计样式？

例如。

1. 这是一个列表项。

我可以定位“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>