notnull notnull - 1 year ago 76
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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download