我正在使用内联 CSS（即 style 属性中的 CSS）制作 HTML 电子邮件签名，我很好奇是否可以使用 :before 和 :after 伪元素。
如果是这样，我将如何使用内联 CSS 实现类似的功能？
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
【问题讨论】：
标签： html css css-selectors pseudo-element inline-styles
不，你不能像 David Thomas 所说的那样在 inline-css 中定位 pseudo-classes 或 pseudo-elements。 有关详细信息，请参阅 BoltClock 的this 回答关于伪类
没有。 style 属性仅定义给定的样式属性 HTML 元素。伪类是选择器家族的成员， 这不会出现在属性中.....
我们也可以为 pseudo-elements 编写相同的用法
没有。 style 属性仅定义给定的样式属性 HTML 元素。伪类和伪元素是选择器家族的成员，它们不会出现在属性中，因此您不能内联样式。
【讨论】：
您不能为伪元素指定内联样式。
这是因为伪元素，如伪类（请参阅我对this other question 的回答），在 CSS 中使用选择器定义为文档树的抽象，无法在 HTML 中表达。另一方面，内联 style 属性是在 HTML 中为特定元素指定的。
由于内联样式只能出现在 HTML 中，它们只会应用于定义它们的 HTML 元素，而不应用于它生成的任何伪元素。
顺便说一句，伪元素和伪类在这方面的主要区别在于默认情况下will be inherited 由:before 和:after 从生成元素继承的属性，而伪类样式根本不适用。例如，在您的情况下，如果您将text-align: justify 放在td 元素的内联样式属性中，它将被td:after 继承。需要注意的是，您不能使用内联样式属性声明 td:after；您必须在样式表中执行此操作。
【讨论】：
如上所述：不可能调用 css 伪类/内联元素。
我现在所做的是：
给你的元素一个唯一的标识符，f.ex。一个 id 或一个独特的类。
并写一个合适的<style>元素
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
丑陋，但是什么内联 css 不是..？
【讨论】：
scoped 样式和:root psuedo-class（这太酷了）：<article><style scoped>:root:before { content: "*";}</style><!-- something --></article>。
:scope伪类：<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
scoped styles) 和CSS Spec (:scope) 中。我应该更清楚。
你可以使用内联的数据
<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>
【讨论】：
data-content 属性打印为content 用于伪元素。它与使用内联 CSS 创建伪元素无关。
是的，有可能，只需为您在之后或之前添加的元素添加内联样式，示例
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
【讨论】：
::after 和::before 伪元素需要content: value，否则默认为content:none结果基本上没有。
如前所述，您不能使用内联元素来设置伪类的样式。 Before and after 伪类是元素的状态，而不是实际元素。你只能使用 用于此的 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 中创建伪元素。
但是，如果您可以在样式表中创建伪元素，那么可以通过为其父元素设置内联样式，然后使用inherit 关键字设置伪元素的样式来内联样式，如下所示：
<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 值：
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
例如对背景图片很有用。
【讨论】：
div::before风格你打算在哪里写？