有没有办法使数字在有序列表加粗？ [英] Is there any way to make numbers in 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,c regular.

意识到< span> 解决方法...

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

推荐答案

strong> 计数增量

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

DEMO

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