Html 使用带有内联 CSS 的 CSS :before 和 :after 伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14141374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS :before and :after pseudo-elements with inline CSS?
提问by Bah-Bee
I'm making an HTML email signature with inline CSS (i.e. CSS in styleattributes), and I am curious as to whether it's possible to use the :beforeand :afterpseudo-elements.
我正在使用内联 CSS（即style属性中的CSS ）制作 HTML 电子邮件签名，我很好奇是否可以使用:before和:after伪元素。
If so, how would I implement something like this with inline CSS?
如果是这样，我将如何使用内联 CSS 实现这样的功能？
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
回答by BoltClock
You can't specify inline styles for pseudo-elements.
您不能为伪元素指定内联样式。
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 styleattribute, on the other hand, is specified within HTML for a particular element.
这是因为伪元素，如伪类（参见我对另一个问题的回答），是在 CSS 中定义的，使用选择器作为无法用 HTML 表达的文档树的抽象。style另一方面，内联属性是在 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.
由于内联样式只能出现在 HTML 中，因此它们仅适用于定义它们的 HTML 元素，而不适用于它生成的任何伪元素。
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default willbe inheritedby :beforeand :afterfrom the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justifyin an inline style attribute for a tdelement, it will be inherited by td:after. The caveat is that you can't declare td:afterwith the inline style attribute; you must do it in the stylesheet.
顺便说一句，伪元素和伪类在这方面之间的主要区别在于，在默认情况下继承的属性将被继承通过:before并:after从发电元件，而伪类样式只是完全不适用。例如，在您的情况下，如果您放置text-align: justify在td元素的内联样式属性中，它将被td:after. 需要注意的是，您不能td:after使用内联样式属性进行声明；您必须在样式表中执行此操作。
回答by honk31
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style>element
如上所述：内联调用 css 伪类/元素是不可能的。我现在所做的是：给你的元素一个唯一的标识符，f.ex。一个 id 或一个唯一的类。并编写一个合适的<style>元素
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
fugly，但什么内联 css 不是..？
回答by Cevher
You can use the data in inline
您可以使用内联数据
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
回答by Manik Biradar
Yes it's possible, just add inline styles for the element which you adding after or before, Example
是的，这是可能的，只需为您在之后或之前添加的元素添加内联样式，例如
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
回答by Champ
No you cant target the pseudo-classesor pseudo-elementsin inline-css as David Thomassaid. For more details see thisanswer by BoltClockabout Pseudo-classes
不，你不能像大卫托马斯所说的那样针对 inline-css 中 的伪类或伪元素。欲了解更多详情，请参阅本答案由BoltClock约伪类
No. The style attribute only defines style properties for a given HTML element. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute .....
不可以。 style 属性只定义给定 HTML 元素的样式属性。伪类是选择器家族的一员，不会出现在属性中......
We can also write use same for the pseudo-elements
我们也可以为伪元素编写 use same
No. The style attribute only defines style properties for a given HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
不可以。 style 属性只定义给定 HTML 元素的样式属性。伪类和伪元素是选择器家族的成员，它们不会出现在属性中，因此您无法对其进行内联样式。
回答by Artem Mamaev
You can't create pseudo elements in inline css.
您不能在内联 css 中创建伪元素。
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
但是，如果您可以在样式表中创建一个伪元素，那么有一种方法可以通过将内联样式设置为其父元素，然后使用 inherit 关键字来设置伪元素的样式来设置内联样式，如下所示：
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
有时这会很方便。
回答by Nesha Zoric
As mentioned before, you can't use inline elements for styling pseudo classes. Before and afterpseudo classes are states of elements, not actual elements. You could only possibly use JavaScript for this.
如前所述，您不能使用内联元素为伪类设置样式。伪类之前和之后是元素的状态，而不是实际元素。您只能为此使用 JavaScript。
回答by txyoji
If you have control over the HTML then you could add a real element instead of a pseudo one. :before and :after pseudo elements are rendered right after the open tag or right before the close tag. The inline equivalent for this css
如果您可以控制 HTML，那么您可以添加一个真实元素而不是伪元素。:before 和 :after 伪元素在 open 标签之后或 close 标签之前渲染。此 css 的内联等效项
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
会是这样的：
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
记住; 您的“真实”前后元素以及任何带有内联 css 的内容将大大增加页面的大小，并忽略外部 css 和伪元素实现的页面加载优化。
