CSS样式列表标记

Question

我如何设计列表标记的样式？比如使它变成不同的颜色，使它变粗，改变尺寸等。它的样式可以和我设计字体一样吗？

例如。

1. 这是一个列表项目。

我可以定位＆＃34; 1。＆＃34;特别是没有影响文本的其余部分？

我知道有一些方法可以改变类型，比如让它更低级，或者使它成为正方形或使用list-style-type的任何类型，但是这些似乎没有样式选项I＆＃39 ;我正在寻找。

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>