使用CSS:before和:after伪元素与内联CSS？

Question

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

如果是这样,我将如何用内联CSS实现这样的东西？

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

Answer 1

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

这是因为伪元素,比如伪类(参见我对这个问题的回答),在CSS中使用选择器定义为文档树的抽象,无法用HTML表示.style另一方面,内联属性在HTML中为特定元素指定.

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

顺便说一句,在该方面伪元素和伪类之间的主要区别在于,由默认继承的属性将被继承通过:before并:after从发电元件,而伪类样式只是完全不适用.例如,在您的情况下,如果您放置元素text-align: justify的内联样式属性td,它将被继承td:after.需要注意的是,您无法td:after使用内联样式属性声明; 你必须在样式表中这样做.

Answer 2

如上所述:它无法调用css伪类/元素内联.我现在所做的是:给你的元素一个唯一的标识符,f.ex.一个id或一个独特的类.并写一个合适的<style>元素

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

很难,但内联css不是..？

Answer 3

您可以内联使用数据

 <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>

Answer 4

您不能在内联 css 中创建伪元素。

但是，如果您可以在样式表中创建一个伪元素，那么有一种方法可以通过将内联样式设置为其父元素，然后使用 inherit 关键字来设置伪元素的样式来设置内联样式，如下所示：

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

有时这会很方便。

Answer 5

不,你不能像大卫托马斯所说的那样以inline-css中的伪类或伪元素为目标 .欲了解更多详情,请参阅本答案由BoltClock约伪类

不可以.style属性仅定义给定HTML元素的样式属性.伪类是选择器族的成员,它们不属于属性.....

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

不可以.style属性仅定义给定HTML元素的样式属性.伪类和伪元素是选择器族的成员,它们不会出现在属性中,因此您无法将它们设置为内联样式.

Answer 6

是的，有可能，只需为要在元素之后或之前添加的元素添加内联样式即可。

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>