Changing bullet colour with CSS

[LRrokaj7]

Hello, 

I am trying to change the colour of the bullets only but when I add the extra style to the <ul>, the colour of the text changes as well. What can I do? 

The colour of the bullet should be #fc6676

The colour of the text should be #1f2124

I have attached an image of the code below. 

[Anton · Accepted solution]

Hi @LRrokaj7, 

if you want to apply those colors to all bullets on every page you can put this code into your CSS

li::marker{color:#fc6676;} {# This is the bullet color #}
li{color:#1f2124;} {# This is the text color #}

If you want to have more flexibility you could work with classes in your rich-text/custom module like this:

<ul class="default-bullets">
<li>Lorem ipsum</li>
</ul>

<ul class="other-bullets">
<li>Lorem ipsum</li>
</ul>

and than write the CSS like this:

ul.default-bullets li::marker{color:#fc6676;} {# This is the bullet color #}
ul.default-bullets li{color:#1f2124;} {# This is the text color #}

ul.other-bullets li::marker{color:#green;} {# This is the bullet color #}
ul.other-bullets li{color:#blue;} {# This is the text color #}

Of course you could implement the theme/brand variables so the colors would automatically change if you'd change colors in your theme or brand settings. 

best, 

Anton

[PamCotton]

Hey @LRrokaj7 thank you for posting in our Community!

You can style only the pseudo-element, you can change the bullet color without affecting the text color. Adjust the content, color, width, and margin-left properties as needed to customize the appearance of the bullets.

To our top experts, @DanielSanchez and @Anton any recommendations for @LRrokaj7 matter?

Thank you,

Pam