Alternative Bullet Styles

Hi there,

1. Select the List Block for Pros and in Advanced > Additional CSS Class(es) add: pro-list
2. Repeat for the Con list and add con-list

Now you can do this:

.entry-content ul.pro-list li:before {
    content: "\2713";
    color: #689931;
}

.entry-content ul.con-list li:before {
    content: "\2717";
    color: red;
}

Just change the Unicode for your symbols and the color if you want that to change that.

Apologies but where do I find the List Block? I can find Additional CSS under customize but not Advanced > Additional CSS Class

Are you using the Block Editor? If yes, then edit that page, and select the List. In the sidebar settings for that block you will see the Advanced Panel.

Thanks, But that seems to change the colour but not the symbol? I've added \2713 for the Tick and \2717 for the cross to the following page https://makemesustainable.com/what-are-solar-screens-for-windows/

Using this as the source for the code: https://www.toptal.com/designers/htmlarrows/symbols/

Sorry about that, It's the cursed quote marks in the CSS, they can't be “ curly, they have to be " straight.
I updated the code above to fix that:

https://generatepress.com/forums/topic/alternative-bullet-styles/#post-2411260

Thanks that works great.

Glad to hear that!