Html 将CSS:before和：after伪元素与内联CSS一起使用？

我正在使用内联CSS（即

样式

属性中的CSS）制作HTML电子邮件签名，我很好奇是否可以使用

：before

和

：after

伪元素

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

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

不，你不能像David Thomas所说的那样以内联css或为目标。 有关更多详细信息，请参见BoltClock关于伪类的回答

否。“样式”属性仅定义给定样式的样式属性 HTML元素。伪类是选择器家族的成员， 属性中不出现的

我们还可以为伪元素编写并使用相同的

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

---

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

这是因为伪元素，比如伪类（参见我的答案），是在CSS中使用选择器作为文档树的抽象来定义的，不能用HTML表达。另一方面，在HTML中为特定元素指定了内联

style

属性

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

---

另一方面，伪元素和伪类在这方面的主要区别在于默认情况下由生成元素的

：before

和

：after

继承的属性，而伪类样式根本不适用。例如，在您的示例中，如果将

text align:justify

放置在

td

元素的内联样式属性中，它将由

td:after

继承。需要注意的是，不能使用内联样式属性声明

td:after

；必须在样式表中执行此操作。

如上所述：不可能内联调用css伪类/-元素。 我现在做的是： 为元素指定唯一标识符f.ex。id或唯一类。 并编写一个fitting

元素

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

#id29:before{content:*“；}

---

fugly，但是内联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>

td{text align:justify；}
td:after{content:attr（数据内容）；display:inline块；宽度：100%；}

是的，这是可能的，只需为添加在后面或前面的元素添加内联样式，例如

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

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

.水平进度：在{宽度：45%；}之后

如前所述，不能使用内联元素设置伪类的样式。伪类是元素的状态，而不是实际元素。你只能使用

---

JavaScript

如果您可以控制HTML，那么您可以添加真实元素而不是伪元素。 ：before和：after伪元素在打开标记之后或关闭标记之前呈现。 此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>

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

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

TD含量

---

记住,；您的“真实”前后元素以及任何带有内联css的元素都将大大增加页面的大小，并忽略外部css和伪元素可能实现的页面加载优化。

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

但是，如果可以在样式表中创建伪元素，则可以通过将内联样式设置为其父元素，然后使用inherit关键字设置伪元素的样式，从而内联设置伪元素的样式，如下所示：

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

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

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

家长：以前{
内容：''；
背景图像：继承；
（其他）
}

有时这很方便。

您可以使用

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

在css中

el:after{
....
填充顶部：var（--填充顶部，0px）；
}

您可以内联传递变量值，然后在样式表中，对要操作的伪元素属性使用

inherit

值：

HTML

<div style="color: whitesmoke;">
</div>

---

例如，对于背景图像很有用。

您不能使用内联样式以伪类或伪元素为目标。可能重复@Champ：这不是同一个问题，因为伪元素和伪类不是一回事。我在这里写了我自己的答案来详细说明。请看我的答案和我对这个问题的评论。是的，答案不一样。但是它们不能内联使用的原因是相同的，对吗？答案是相似的，但问题是非常不同的。这不是内联CSS。内联CSS要求将style=”“属性传递给各个HTML元素。通常需要将CSS格式发送到Gmail，Gmail会删除标签中的任何内容。请参见此处（）以了解自动机。我认为这是最接近内联伪元素的方法。更好的是，使用新的

作用域
样式和
:root
psuedo类（这太酷了）：
:root:before{content:*”；}
。更正：使用
:scope
伪类：
：scope:before{content:*”；}
这是非常新的东西，可能没有实现，并且可能会改变。这是在当前和未来。我应该说得更清楚。用。。。标记称为内部或嵌入式CSS，而不是内联CSS。这会将伪元素的
数据内容
属性打印为
内容
。这与使用内联CSS创建伪元素无关。我来这里是想了解如何在内联CSS中应用伪选择器，这个答案向我展示了实现同样效果的另一种方法。内容需要基于大量动态创建的可能选项，因此为每个可能的结果编写大量单独的CSS选择器是不实际的