Question

我正在使用内联CSS制作HTML电子邮件签名（即style属性中的CSS），我很好奇是否可以使用:before和:after伪-elements。

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

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

Answer 1

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

这是因为伪元素，如伪类（参见我对this other question的回答），在CSS中使用选择器定义为文档树的抽象，无法用HTML表示。另一方面，内联style属性在HTML中为特定元素指定。

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

另外，在这方面，伪元素和伪类之间的主要区别在于默认will be inherited由: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

不，你不能以inline-css为目标pseudo-classes或pseudo-elements David Thomas 说。有关详细信息，请参阅 BoltClock 的this回答伪类

没有。 style属性仅定义给定的样式属性 HTML元素。伪类是选择器族的成员，属性中没有出现.....

我们也可以为伪元素

编写相同的用法

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

Answer 4

您可以使用内嵌

中的数据

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

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

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

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

Answer 6

您不能在嵌入式CSS中创建伪元素。

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

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

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

有时候这很方便。

Answer 7

您可以使用

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

在CSS

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

Answer 8

如前所述，您无法使用内联元素来设置伪类的样式。 Before and after伪类是元素的状态，而不是实际元素。你只能使用这个JavaScript。

Answer 9

如果您可以控制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和伪元素可能实现的页面加载优化。

Answer 10

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

HTML

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

CSS

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

例如用于背景图像。

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

10 个答案: