如何检测客户端是否支持伪元素，适配邮件端:before/:after渲染问题

核心结论 #

目前不存在通用的媒体查询或者原生特性检测语句可以判断邮件客户端是否支持:before/:after伪元素。邮件客户端的渲染引擎碎片化极强，没有网页端@supports这类通用特性检测规则可用。

推荐适配方案 #

你可以按照优先级选择以下方案，不需要全量整理所有不支持伪元素的客户端列表：

• 优先做渐进式增强兜底：不要把伪元素作为列表展示的必要依赖。先写通用兼容的基础列表样式：给ul/li设置默认的列表符号、缩进边距，伪元素的美化样式写在基础样式之后。支持伪元素的客户端会自动覆盖基础样式实现美化效果，不支持的客户端直接展示原生列表，不会影响内容可读性。
• 针对高占比不兼容客户端做单独适配：目前市场占比足够高、且明确不支持伪元素的客户端只有Windows端的Outlook（使用Word渲染引擎的版本），你可以直接用Outlook专属的条件注释单独适配：

  <!--[if mso]>
  <style>
  /* 这里写仅Outlook识别的列表兜底样式，比如调整缩进、替换默认列表符号 */
  </style>
  <![endif]-->
  

  其余不支持伪元素的小众客户端（比如老旧安卓自带邮件、部分国产桌面邮件客户端）市场占比通常低于2%，如果没有特定的用户群体覆盖要求，用通用兜底样式即可，不需要单独适配。
• 全端一致方案：如果要求所有客户端的列表样式完全统一，可以直接放弃伪元素方案，改用全兼容的实现方式：比如每个列表项前插入带图标的<td>（用表格布局），或者直接插入<img>标签作为列表符号，这类方案所有邮件客户端都支持，不需要做兼容性判断。

内容的提问来源于stack exchange，提问作者Jo Wylie