使用带有内联 CSS 的 CSS :before 和 :after 伪元素?-前端问题

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

本文介绍了使用带有内联 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；您必须在样式表中执行此操作.


As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.

                        这篇关于使用带有内联 CSS 的 CSS :before 和 :after 伪元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！