notnull notnull - 4 months ago 20
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

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