html - 如何仅使用内联 CSS 自定义无序列表元素符号(用于电子邮件)？

Question

我正在寻找一种方法，仅使用内联 CSS(用于 HTML 电子邮件)，将标准无序列表 ( <ul><li>...</li></ul>) 元素符号和间距替换为独特的基于 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 的值属性(property)。

例如，Unicode Character '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>