174

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

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

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

10 回答 10

135

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

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

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

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

于 2013-01-03T15:22:50.990 回答
53

如上所述：它不可能调用 css 伪类/内联元素。我现在做的是：给你的元素一个唯一的标识符，f.ex。一个 id 或一个独特的类。并写一个合适的<style>元素

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

丑陋，但是什么内联css不是..？

于 2013-11-29T15:04:45.873 回答
26

您可以使用内联数据

 <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>
于 2014-04-29T10:39:32.313 回答
12

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

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

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

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

有时这很方便。

于 2019-09-18T10:08:02.273 回答
9

不，您不能像David Thomas所说的那样针对 inline-css 中 的伪类或伪元素。有关更多详细信息，请参阅BoltClock关于伪类的答案

不可以。style 属性仅定义给定 HTML 元素的样式属性。伪类是选择器家族的成员，不会出现在属性中......

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

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

于 2013-01-03T15:17:03.253 回答
4

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

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

 <div class="horizontalProgress"></div>
于 2016-09-20T06:50:13.383 回答
2

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

于 2018-05-21T14:44:42.600 回答
1

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

HTML

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

CSS

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

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

于 2021-05-04T18:47:37.777 回答
1

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

于 2019-03-25T18:44:06.700 回答
0

您可以使用

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

在 CSS 中

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}
于 2020-06-16T20:59:57.740 回答