Coloring the List-Style-Type for an Ordered List

[joshdraha]

I can’t for the life of me figure out how to color JUST the square list icon in an ordered list. Every code I try colors the square AND the test. All I want is the square to change to color #f05a23. Any help would be awesome!

ol {
list-style-type: square;
margin-left: 0;
padding-left: 1em;
}

[Atelierbram]

Wrapping the text in in the list-items in span‘s can work, but I don’t know if you can touch the HTML for this thing.

http://codepen.io/atelierbram/pen/LxOJxw

[Chris Coyier]

As a fork of @Atelierbram’s Pen, another method is to remove the list-style and apply the square via pseudo content.

http://codepen.io/chriscoyier/pen/oBoJLr

[Author]

Posts