Is it possible to have the number (or letter or numeral etc.) of an ordered list have a different style than the content without having some kind of div or span tags inside each list element?
4
- what do you mean by different style than the content? Is the content a list too. Can you provide some code?reggaemahn– reggaemahn2013-07-05 15:37:20 +00:00Commented Jul 5, 2013 at 15:37
- Do you mean like different font properties like family, color, size for the list item number/letter as opposed to the content of the list item?Marc Audet– Marc Audet2013-07-05 15:46:33 +00:00Commented Jul 5, 2013 at 15:46
- @MarcAudet Yes, that is what I mean.PixelArtDragon– PixelArtDragon2013-07-05 15:47:12 +00:00Commented Jul 5, 2013 at 15:47
- Garan: If I were doing this, I would consider using an inner wrapper around the list item content and apply a specific style to it. Alternatively, I could also set up a custom counter for the list and place the counted in a pseudo-element and apply the style to the pseudo element. The pseudo-element approach may be more practical is you have large lists and you are not too worried about really old browsers.Marc Audet– Marc Audet2013-07-05 15:53:47 +00:00Commented Jul 5, 2013 at 15:53
Add a comment |
2 Answers
It's possible with setting the list-style to 'none' and replacing the default numbering with CSS counters and pseudo-elements. Example: http://jsbin.com/agagoc/1/edit
ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li:before { content: counter(my-awesome-counter); /* any style for numbers, as if they were spans before the content of LIs, goes here */ } 
3 Comments
PixelArtDragon
So essentially, as the page is being displayed, it dynamically increases the count and uses that counter?
Ilya Streltsyn
The counter is incremented for any element for which the counter-increment property is set, starting from the value it was reset to with counter-reset (default is 0). Good article on CSS counters is here: dev.opera.com/articles/view/…
PixelArtDragon
Thanks for the link. Turns out the person I was doing the work for didn't mind the numbers being the same style.
Yes, you can like this:
li { list-style: none; counter-increment: myCounter; } li:before { content: counter(myCounter); font-size: 19px; color: red; } 