为了为 list-style-type
自动生成的数字着色,您可以使用 CSS 的伪元素 ::before
或 ::after
结合 counter-increment
和 content
属性。以下是一个示例:
<ol class="colored-list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ol>
colored-list
类,并使用 counter-reset
属性为列表项设置计数器:.colored-list {
counter-reset: list-item;
}
::before
伪元素显示计数器的值。通过设置 color
属性为不同的颜色,可以改变数字的颜色:.colored-list li {
counter-increment: list-item;
position: relative;
}
.colored-list li::before {
content: counter(list-item);
position: absolute;
left: -1.5em;
color: red; /* 更改此处的颜色值以更改数字颜色 */
}
这样,在 colored-list
类的有序列表中的数字会根据您设置的颜色显示。您可以通过更改 color
属性的值来更改数字的颜色。
领取专属 10元无门槛券
手把手带您无忧上云