Marius van Witzenburg We fight for our survival, we fight!

6Jul/110

How to change the style of the prefix numbers of a ordered list, OL tag, with CSS

A solution that most people use is adding a SPAN tag to the list item and style the OL tag first and re-style the SPAN tag.

CSS

ol { font-weight: bold }
ol span { font-weight: normal }

HTML

<ol>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
<li><span>Item 4</span></li>
<li><span>Item 5</span></li>
</ol>

But there is another way with only CSS2 stylesheet.

ol { counter-reset: item }
ol li { display: block }
ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}

Result of a ordered list without span tags and the above CSS:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

For some more info check w3schools.com page: CSS counter-increment property

Posted by mariusvw

Geëtiketeerd als: , , , , Laat een reactie achter
Reacties (0) Trackbacks (0)

Nog geen reacties


Leave a comment

(required)

Nog geen trackbacks.