有没有一种方法可以使有序列表中的数字加粗? [英] Is there a way to make numbers in an ordered list bold?

问题描述

是否有CSS选择器仅将某种样式附加到有序列表的数字部分?

Is there any CSS selector to attach some style to the numerical part of an ordered list only?

我有类似HTML的

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>

应该输出:

1.a
2.b
3.c

我需要将1、2和3设为粗体，同时使a，b和c保持常规.

I need to make 1., 2. and 3. bold, while leaving a, b, and c regular.

我知道< span> 的解决方法...

I am aware of the <span> workaround...

推荐答案

计数器增加

Counter-increment

CSS

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

演示

DEMO

这篇关于有没有一种方法可以使有序列表中的数字加粗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！