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

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

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

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
242584 次浏览
小开

不，你不能像 David Thomas说的那样，把 伪类或者 伪元素作为内联 css 的目标。 有关更多细节，请参见 这个的 BoltClock关于 < strong > 伪类的答案

样式属性只定义给定的样式属性 伪类是选择器家族的一员, 不会出现在属性中。

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

样式属性只定义给定的样式属性 HTML 元素。伪类和伪元素是选择器家族的成员，它们不出现在属性中，因此不能内联地对它们进行样式化。

小开

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

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

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

顺便说一句，伪元素和伪类在这方面的主要区别在于默认情况下 将被继承和 :after从生成元素继承的属性，而伪类样式根本不适用。例如，在您的示例中，如果将 text-align: justify放在 td元素的内联样式属性中，它将由 td:after继承。需要注意的是，不能使用内联样式属性声明 td:after; 必须在样式表中声明 td:after。

小开

如上所述: 不可能在内联中调用 css 伪类/-元素。 我现在做的是: 给你的元素一个唯一标识符，例如一个 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>
小开

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

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


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

如前所述，不能使用内联元素来样式化伪类.之前和之后伪类是元素的状态，而不是实际的元素 用 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>

请记住，您的“实际”之前和之后的元素以及任何带有内联 css 的内容都会大大增加页面的大小，并忽略外部 css 和伪元素使页面加载优化成为可能。

小开

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

然而，如果你可以在样式表中创建一个伪元素，那么有一种方法可以通过设置一个内联样式到它的父元素，然后使用继承关键字来设置伪元素的内联样式，如下所示:

<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{
....
padding-top:var(--padding-top, 0px);
}
小开

编辑: 如果你可以访问样式表，你可以内联地传递变量值，然后，在样式表中，为你想操作的伪元素属性使用 inherit值:

超文本标示语言

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

CSS

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

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


提交答案