Differently styled bullet points

[INcroatia]

Hello,

We would like to change the color of the bullet points on some elements. We tried adding some custom css, like this one for example:

li::before {content: “•”; color: red;
display: inline-block; width: 1em;
margin-left: -1em}

That does change the color of the bullets but it also adds bullet points to menu items. We then tried applying css to only specific elements but it still changes menu items. This is how that looks:

Is there a way to change bullet point colors but not have them added to menus?

[jade]

Hi there,

Please try to update your code to:

.content li::before {
    content: "•"; 
    color: red;
    display: inline-block; 
    width: 1em;
    margin-left: -1em
}

Please check this link to learn more about CSS Specificity: https://goo.gl/GB9zjm

Hope this helps.

[INcroatia]

Hello,

That worked! We added that piece of code and it changed the bullet points to a different color without adding them to the menu items. We only had to add this piece of code:

ul {
padding: 0;
margin: 0;
list-style: none;
}

so we remove the leftover standard bullets underneath the new ones.

Thank you again!

[jade]

You’re most welcome.