使用带有内联 CSS 的 CSS :before 和 :after 伪元素?

Using CSS :before and :after pseudo-elements with inline CSS?(使用带有内联 CSS 的 CSS :before 和 :after 伪元素?)

问题描述

我正在使用内联 CSS(即 style 属性中的 CSS)制作 HTML 电子邮件签名，我很好奇是否可以使用 :before和 :after 伪元素.

I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.

如果是这样，我将如何使用内联 CSS 实现类似的功能?

If so, how would I implement something like this with inline CSS?

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

推荐答案

你不能为伪元素指定内联样式.

You can't specify inline styles for pseudo-elements.

这是因为伪元素，如伪类(请参阅我对 this其他问题)，在 CSS 中定义，使用选择器作为不能用 HTML 表示的文档树的抽象.另一方面，内联 style 属性是在 HTML 中为特定元素指定的.

This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.

由于内联样式只能出现在 HTML 中，它们只会应用于定义它们的 HTML 元素，而不适用于它生成的任何伪元素.

Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.

顺便说一句，伪元素和伪类在这方面的主要区别在于默认继承的属性将被 :before 和 :after 继承生成元素，而伪类样式根本不适用.例如，在您的情况下，如果您将 text-align: justify 放在 td 元素的内联样式属性中，它将被 td:after 继承.需要注意的是，您不能使用内联样式属性声明 td:after；您必须在样式表中执行此操作.