notnull notnull - 1 year ago 55
CSS Question

Is there any way to make numbers in ordered list bold?

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

I have HTML like:

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


Which should output:

1.a
2.b
3.c


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

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

Answer Source

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