内联css加伪元素,使用CSS：前和：后内联CSS伪元素？(Using CSS :before and :after p

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

如果是的话，我将如何实现这样的内联CSS？

td { text-align: justify; }

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

Answer 1:

你不能指定伪元素内嵌样式。

这是因为伪元素，如伪类(见我的回答这个问题，其他的 )，在使用选择的文档树不能在HTML来表达抽象的CSS定义。 内嵌style属性，在另一方面，被内HTML指定用于特定元件。

由于内嵌样式可以在HTML中才会出现，他们将只适用于他们的，而不是它产生的任何伪元素定义的HTML元素。

顺便说一句，在该方面伪元素和伪类之间的主要区别在于，由默认继承的属性将被继承由:before和:after从发电元件，而伪类样式只是不适用在所有。 在你的情况，例如，如果你把text-align: justify在一个内嵌样式属性td元素，它将被继承td:after 。 需要提醒的是，你不能宣布td:after与内嵌样式属性; 你必须这样做在样式表。

Answer 2:

如上所述：其不能够调用一个CSS伪类/ - 元素内联。 我现在所做的，就是：给你的元素的唯一标识符，f.ex. ID或唯一的类。 和写入的嵌合

的fugly，但什么内嵌CSS的心不是..？

Answer 3:

不，你不能针对伪类或伪元素如大卫·托马斯说，直列CSS。 欲了解更多详情，请参阅本答案由BoltClock约伪类

号style属性仅定义为给定的HTML元素样式属性。 伪类是家庭选择，它不会在属性发生的一员.....

我们也可以编写使用相同的伪元素

号style属性仅定义为给定的HTML元素样式属性。 伪类和伪元素是家庭选择的，所以你不能内嵌样式他们不中的属性发生的一员。

Answer 4:

您可以使用内嵌的数据

td { text-align: justify; }

td:after { content: attr(data-content); display: inline-block; width: 100%; }

Answer 5:

是的，它是可能的 ，只是添加内嵌样式，你之前或之后添加元素，例

.horizontalProgress:after { width: 45%; }

Answer 6:

正如前面提到的， 你不能使用样式伪类的内联元素 。 之前和之后的伪类元素，而不是实际的元素状态。 你只能有可能使用JavaScript这一点。

Answer 7:

如果你控制了HTML，那么你可以添加一个真正的元素，而不是一个伪之一。 ：before和：after伪元素的开放标签之后或接近tag之前渲染。 内联等效这个CSS

td { text-align: justify; }

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

会是这样的：

TD Content

记住; 你的“真实”之前和之后的元素和任何与内联CSS将大大增加你的页面的大小，而忽略页面加载优化，外部CSS和伪元素成为可能。

文章来源: Using CSS :before and :after pseudo-elements with inline CSS?