Bullets colors different from the text color in a list without using images or span


Developing a bullet list I had to use a different color for the bullets and for the text in the list.
The usual markup to achieve this effect is using a span, but I was looking for a more cool way to achieve this effect, so I did that using a pseudo selector on the list.
The idea is using the “:before” selector and assign a color to it different from the “real” list color.

The markup

The CSS

We define a “main” color for the list, remove the “list style” form the list elements and finally we apply the bullet in the color we prefer.

If we would like to use a different symbol you just have to change the content to the unicode char you’d like to use.

Ti Potrebbe Interessare Anche: