::之后需要内联HTML电子邮件吗？ [英] ::after for inline HTML email?

问题描述

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

这是生成的内容：

如何创建内联形状？

我尝试的所有方法都无效，因为它似乎在位置并且电子邮件中不支持负边距。

Everything I tried didn't work because it seems position and negative margins aren't supported in email.

推荐答案

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

Use it as an image because pseudo-element content does not appear in the DOM. These elements are not real elements. As such, they are not accessible to most assistive devices. So, never use pseudo-elements to generate content that is critical to the usability or accessibility of your pages.

阅读更多

这篇关于::之后需要内联HTML电子邮件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！