如何仅使用内联 CSS 自定义无序列表项目符号（用于电子邮件）？

Question

我正在寻找一种方法，<ul><li>...</li></ul>仅使用内联 CSS（用于 HTML 电子邮件），用独特的基于 Unicode 字符的项目符号和间距替换标准无序列表 ( ) 项目符号和间距。

以下是我通常在标准 HTML 网页的“外部”CSS 文件中使用的代码：

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%;
    }

问题是 HTML 电子邮件仅限于内联 CSS，它不支持:before.

如何仅使用内联 CSS 来实现相同的效果？

Answer 1

您可以指定 unicode 字符点作为属性的值list-style-type。

例如，Unicode 字符“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>