<ol> with numbers another color

html css colors html-lists

depo · Jan 28, 2009 · Viewed 91.6k times · Source

<ol>
   <li>test</li>
   <li>test</li>
</ol>

will show as:

test
test

I want to have numbers coloured and text black!

I can edit the css, but I do not have access to the HTML.

Answer

The CSS spec gives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn't appear to work on IE7:

<html>
<head>
    <style>
        ol { counter-reset: item; }
        ol li { display: block; }
        ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</body>
</html>

<ol> with numbers another color

Answer

Related questions