在内联CSS中使用CSS：before和：after伪元素吗？

我正在使用内联CSS（即style属性中的CSS ）制作HTML电子邮件签名，并且对于是否可以使用:before和:after伪元素感到好奇。

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

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

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

这是因为伪元素像伪类（请参见我对另一个问题的回答）一样，是在CSS中使用选择器作为不能以HTML表示的文档树的抽象来定义的。style另一方面，内联属性是在HTML中为特定元素指定的。

由于内联样式只能在HTML中出现，因此它们仅适用于在其上定义的HTML元素，而不适用于其生成的任何伪元素。

顺便说一句，伪元素和伪类在这方面之间的主要区别在于，在默认情况下继承的属性将被继承通过:before并:after从发电元件，而伪类样式只是完全不适用。例如，在您的情况下，如果您text-align: justify为td元素放置内联样式属性，则它将被继承td:after。需要注意的是，您不能td:after使用内联样式属性进行声明；您必须在样式表中执行此操作。

如上所述：不可能调用css伪类/ -eline内联。我现在所做的是：给您的元素一个唯一的标识符f.ex。id或唯一类。并写一个拟合<style>元素

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

笨拙，但内联CSS不是什么？

您可以内联使用数据

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

不，您不能像David Thomas所说的那样，将inline-css中的伪类或伪元素作为目标 。欲了解更多详情，请参阅本答案由BoltClock约伪类

否。style属性仅定义给定HTML元素的样式属性。伪类是选择器族的成员，它们不在属性.....中。

我们也可以为伪元素编写use same

否。style属性仅定义给定HTML元素的样式属性。伪类和伪元素是选择器族的成员，它们不会出现在属性中，因此您不能内联设置它们的样式。

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

但是，如果可以在样式表中创建伪元素，则可以通过以下方式来对其进行内联样式设置：将内联样式设置为其父元素，然后使用Inherit关键字对伪元素进行样式设置，如下所示：

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

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

有时这可能很方便。

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

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

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

如前所述，您不能使用内联元素来设置伪类的样式。伪类之前和之后是元素的状态，而不是实际元素。您只能为此使用JavaScript。

如果您可以控制HTML，则可以添加一个实际元素，而不是伪元素。：before和：after伪元素在open标记之后或close标记之前呈现。此CSS的内联等效项

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

将是这样的：

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

记住; 您之前和之后的“实际”元素以及任何带有内联css的元素都会极大地增加页面的大小，而忽略外部css和伪元素使页面加载优化。

您可以使用

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

在CSS

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}