Coloured bullet points

Hi there,

target the entry-content of the page by chaging:

ul for .entry-content ul

and

ul li:before for .entry-content ul li:before

Yes,

that seems to have worked, thanks.

Never got my head around CSS!

cb.

So, for everyone else, this is what I used:

/* Coloured bullet points */
.entry-content ul {
  list-style: none; /* Remove default bullets */
}
.entry-content ul li:before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: orangered; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

You're welcome - thanks for sharing your final code

I may have found that hack in a different forum. Thanks for fixing it for me!

cb.

:)

Thank You. That was exactly what I needed today.

How do I do this for a specific list on a specific page? I don't want to universally change all my bullets.

I have a food blog and depending on the recipe I want to use a .svg or Unicode character instead of a bullet. I've done my due diligence and have tried to apply what I learned in various forums but I can't seem to get it to work. Honestly, I've spent hours at this.

I don't want to use a custom image. I'd like to use a Unicode character or an emoji.

I understand how to assign a class to my specific list in the HTML code and then reference that class in the CSS but I can't seem to get the Unicode or Emoji to work.

Can you open a new topic and link us to the page in question?

Thanks :)