li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

Question

After proudly coloring my liststyle bullet without any image url or span tags, via:

ul{ list-style: none; padding:0;  margin:0;  } li{ padding-left: 1em; text-indent: -1em;    } li:before { content: "■"; padding-right:7px; } 

Although these stylesheets work perfectly down to the rounded borders and other css3 stuff, and although the recipient of the email (for instance, Eudora OSE 1) renders all css styles correctly, just like in a browser, there is one problem: the bullets like • or ■ become converted into &#adabacadabra;

Appearing finally like so in emails:

How do I proceed from here?

Answer 1

Never faced this problem before (not worked much on email, I avoid it like the plague) but you could try declaring the bullet with the unicode code point (different notation for CSS than for HTML): content: '\2022'. (you need to use the hex number, not the 8226 decimal one)

Then, in case you use something that picks up those characters and HTML-encodes them into entities (which won't work for CSS strings), I guess it will ignore that.

Answer 2

You ca try this:

ul { list-style: none;}  li { position: relative;}  li:before {     position: absolute;       top: 8px;       margin: 8px 0 0 -12px;         vertical-align: middle;     display: inline-block;     width: 4px;     height: 4px;     background: #ccc;     content: ""; } 

It worked for me, thanks to this post.