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

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

不，你不能像 David Thomas 所说的那样在内联 css 中定位 伪类 或 伪元素。 有关详细信息，请参阅BoltClock关于Pseudo-classes的this

答案

没有。 style 属性只定义给定的样式属性 HTML 元素。伪类是选择器家族的一员， 这不会出现在属性中......

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

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

Answer 6

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

Answer 7

是的，这是可能的，只需为您在之后或之前添加的元素添加内联样式，Example

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

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

Answer 8

如果您可以控制 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>

牢记；你的“真实”前后元素和任何带有内联 css 的东西都会大大增加你的页面大小，并忽略外部 css 和伪元素可能实现的页面加载优化。

Answer 9

你可以使用

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

在CSS中

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

Answer 10

EDITED：如果您有权访问样式表，则可以内联传递变量值，然后在样式表中为要操作的伪元素属性使用

inherit

值：

HTML

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

CSS

div::before {
  content: '';
  color: inherit;
}

例如对背景图像很有用。