::after 用于内联 HTML 电子邮件？答案

【问题标题】：::after for inline HTML email?::after 用于内联 HTML 电子邮件？
【发布时间】：2018-07-31 14:45:58
【问题描述】：

.banner  {
  width: 34px;
  height: 52px;
  position: relative;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  float: right;
  padding-left: 10px;
  padding-top: 4px;
}

.banner:after { # How can I make this same behavior work inline?
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 9px solid white;
}

这就是产生的结果：

如何内联创建此形状？

我尝试的所有方法都不起作用，因为它似乎 position 并且电子邮件不支持负边距。

【问题讨论】：

在banner 中创建一个div 作为最后一个子元素，并应用内联样式...
@kukkuz 你不应该在 HTML 邮件中使用 <div> 元素
我不认为你可以在内联后应用更好地使用图像
@RudiUrbanek 我也使用了上面的图片，但是如果没有遇到position 和负边距的相同问题，我也无法在上面覆盖文本
不能。伪元素不在 DOM（或电子邮件）中，因此无法接收内联样式。

标签： html css email

【解决方案1】：

将其用作图像，因为伪元素内容不会出现在 DOM 中。这些元素不是真正的元素。因此，大多数辅助设备都无法访问它们。因此，切勿使用伪元素来生成对页面可用性或可访问性至关重要的内容。

【讨论】：