将:: before选择器应用于HTML电子邮件时是否不受支持?

时间:2019-04-23 10:10:35

标签: html css email

好的,所以这可能是一个愚蠢的问题,但是我目前没有在网上找到任何有用的材料来找到对我这个相当简单但令人讨厌的问题的答案。

尝试在HTML电子邮件中的列表项之前设置项目符号的样式时,我遇到了一个非常烦人的问题。

我要做的就是将列表项变成正方形,然后将项目符号的颜色设置为某种颜色,但将列表文本内容保留为黑色。它应该和下面的css一样简单,但是不起作用。

ul{list-style-type:square;} ul li{color:#000;} ul li::before{color:#fac600}

我也尝试了以下方法,但认为:: before可能不受支持

  ul{list-style:none;}
  ul li::before {
  content: "\2022";
  color: #fac600;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  }

这时我很沮丧,我也试图用图像代替项目符号,但这也行不通,因为我知道这不受支持。

我可以轻松地将项目符号更改为正方形,并更改项目符号的颜色+列表文本,但无需单独更改。

有人遇到此问题或知道解决方法吗?

有兴趣听到你们的想法,想知道您是否遇到过同样的问题。预先感谢。

2 个答案:

答案 0 :(得分:0)

默认情况下,无论您是否正在开发电子邮件,都无法更改li项目符号的颜色。但是,您可以使用以下CSS实质上隐藏原始的项目符号点,然后创建一个新的项目符号点。

ul{
  list-style:none;
  }
  
ul li::before {
  content: "\2022";
  color: #fac600;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  }
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

答案 1 :(得分:0)

电子邮件不普遍支持

:before。它适用于IOS,Apple,但不适用于Gmail或Outlook。