buzzoole code

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.

Questo Blog è Indipendente e Supportato Solamente dai suoi Lettori.
Se vuoi sostenerlo, Condivi il Post sui Social Network:
Aggiungi il nostro sito alla Whitelist di Adblock Plus
e magari Fai Anche un Acquisto su Amazon partendo da Qui
(a te non costa nulla!).