Adding custom bullet style in HTML email template

Yowza
Member

I'm trying to add custom styling in the head of a template to default our ul/li to have specific bullets (specifically #3399CC colored squares).

 

One thing we've tried that works in the editor, but fails at time of sending is:

ul{
/* Remove default bullets */
list-style: none;
}

ul li::before {

/* Add Unicode of the bullet */
content:"\25AA" !important;

/* Color of the content -- bullet here */
color:#3399CC !important;

/* Required to add space between
the bullet and the text */
display: inline-block;

/* Required to add space between
the bullet and the text */
width: 1em;

/* Required to add space between the
bullet and the text */
margin-left: -0.9em;
}

 

Has anyone know a technique for something similar?

0 Upvotes
1 Reply 1
Mike_Eastwood
Key Advisor | Gold Partner

Hi @Yowza 

 

Unfortunately not all email clients are created equal.

 

Unlike browsers every company has created their own version of email clients and there is no standardisation. They all interpret CSS differently and different clients support different CSS rules.

 

Here's a great guide of what you can safely use: https://www.campaignmonitor.com/css/

 

In short you need to stick to very simple CSS to make sure your email looks good on all email clients.

 

Have fun

Mike

0 Upvotes