HTML/CSS : How to use another font for list-item Bullets

Question

这个问题与 HTML 和 CSS 中列表项 (< li >) 的样式有关我有几个按数字和字符排序的列表，如下例所示。

<h2>Regulations of use:</h2>
<ol>
<li>Riding no-handed is strictly forbidden.</li>
<li>It is forbidden to modify the rented bike in any way.</li>
<li>In the case of unauthorized use we are entitled, at any time, to prohibit the further use of the bike.</li>
</ol>

应该是这样的:

使用规定:

1. 严禁空手骑行。
2. 禁止以任何方式 retrofit 租用的自行车。
3. 在未经授权的情况下，我们有权随时禁止进一步使用自行车。

但我想用另一种字体和粗体显示数字。如何才能做到这一点？子弹有选择器吗？ (还没有找到)。如果我做一些像这样的 CSS:

li{font-weight:bold;}

整个元素都是粗体 - 这是不需要的。我什至尝试过

ol{font-weight:bold;}

仅适用于 <ol>... </ol>如果它不在 <li>...</li> 内

其实我希望有这样的东西

li:bullet{font-weight:bold;} 

提前致谢。

Answer 1

Demo

CSS

ol {
    list-style: none;
    padding:0;
    margin:0;
    counter-reset: li; /* resetting the counter count */
}
li:before {
    content: counter(li); /* if you want numbers a bullet or you can add your custom bullet */
    counter-increment: li; /* if you have counter li then specify its increment */
    color: red; /* it gives you all the freedom to do anything with the bullets just like the any tag */
    font-size: 50px;
    padding-right: 5px;
    background: #aaa;
}

/* to make things appear same as using <ol> and word-break inline with the start word when screen size is small */
li { 
    padding-left: 2em; 
    text-indent: -2em;
}

---

如果你想要反增量的字母表 Demo

字母表 css 中的计数器增量

ol {
    list-style: none;
    padding:0;
    margin:0;
    counter-reset: listStyle;
}
li:before {
    content: counter(listStyle, lower-alpha);
    counter-increment: listStyle;
    color: red;
    font-size: 50px;
    padding-right: 5px;
    background: #aaa;
}