Styling a counter incremented number on an ordered list

Hi,

I’m not sure if this is even possible, but I thought I would ask to see if anyone knew.

I’ve recently come across the counter-increment property for css, which allows me to set a counter for my ordered list and allows my list items to say Step 1, step 2, step 3 etc.

The CSS is this:

[code]
body{
counter-reset: toc 0;
}

#toc li:before{
content: “Step ” counter(toc, decimal); /* This is the main Line */
counter-increment: toc;
font-size: 3.6em;
font-family: Helvetica Black;
color: #646464;
letter-spacing: -2px;
}

#toc li{
list-style-type: none;
}
[/code]

With the above I have managed to get the phrase “Step 1”, “Step 2”, “Step 3” styled as 3.6em Helvatica Black with a colour of #646464, BUT I want the word “Step” to be a different colour to the number. Does anyone know if this is possible?

Thanks

Phil

Also in #CSS _↴