Как изменить <ul>маркеров на уникальные символы Юникода в строке CSS (необходимо для HTML писем)?

Question

Я ищу способ замены стандартных неупорядоченных списков (<ul><li>...</li></ul>) и интервалов на уникальные символьные маркеры Unicode и интервалы в 'inline' CSS (поэтому я могу безопасно использовать в HTML письма).

Вот код, который я обычно использовал бы в своем "внешнем" CSS файле для стандартной HTML веб-страницы:

ul.med_sqr_bul_ul
    {
        list-style:none !important;

        padding:0px !important;
    }

ul.med_sqr_bul_ul li:before
    {
        content:'\25AA';

        margin:0 0.28em;

        font-size:150% !important;
        vertical-align:-10%;
    }

Но проблема в том, что вы не может использовать псевдоэлементы во «встроенном» CSS, а «внутренний» или «встроенный» CSS по умолчанию удаляется из многих почтовых провайдеров, таких как Gmail.

Поэтому я ищу жизнеспособную альтернативу опции.

Answer 1

Вы можете указать точки символов Юникода в качестве значения для свойства list-style-type.

Например, Символ Юникода 'THUMBS UP SIGN' (U + 1F44D) можно использовать так:

<p>My custom list</p>

<!-- change the unicode character and how far the list is indented here -->
<ul style="list-style-type: '\1F44D'; margin-left: 0.5em">
  <!-- padding-left is the spacing between the text and the list character -->
  <!-- padding-bottom is the vertical spacing between each list item -->
  <li style="padding-left: 0.25em; padding-bottom: 0.25em">one</li>
  <li style="padding-left: 0.25em; padding-bottom: 0.25em">two</li>
  <li style="padding-left: 0.25em; padding-bottom: 0.25em">three</li>
</ul>