将`.css`用于伪元素[重复]答案

【问题标题】：Using `.css` for pseudo-elements [duplicate]将`.css`用于伪元素[重复]
【发布时间】：2011-10-11 20:05:02
【问题描述】：

可能重复：
Manipulating CSS :before and :after pseudo-elements using jQuery

我想要 jQuery 等价于这个 CSS 代码：

p:before {
   content: 'Intro!';
}

我天真地尝试过$('p:before').css('content', 'Intro!');，但它不起作用。

如何使用 jQuery 进行伪元素 CSS 修改？

【问题讨论】：

那个帖子并没有真正提供答案......
@Randomblue：“你不能使用 jQuery 来修改伪元素”怎么不是答案？
@Sotiris：我对操纵 CSS element 本身不感兴趣，只是更改 CSS property。
您确定这不能存储为自定义属性吗？
@BoltClock：我一直在寻找一个肯定的答案。也许有一个使用原始 JavaScript、插件或其他东西的解决方法

标签： jquery css pseudo-element

【解决方案1】：

你不能。

1) 选择器p:before 不仅仅是一个选择器——伪元素定义了不影响实际选择的功能。 jQuery 应该返回什么，所有 p 标签？这就是$(...) 所做的一切——它返回一堆与您的选择器匹配的元素。 jQuery (Sizzle/querySelectorAll) 不知道如何获取:before...

2) 伪元素/类行为也不能通过 JS API 获得。

通过 JS 动态执行此类操作的唯一方法是创建一个 <style> 元素，如下所示：

$('<style>p:before{content:"intro";}</style>').appendTo('head');

请问您当初为什么要这样做？

【讨论】：

伪元素！不要把两者混为一谈。
@BoltClock，谢谢，已编辑 :)
我想要这个的原因是在特定元素上覆盖，该特定元素会随着时间而变化。请参阅this 问题。

【解决方案2】：

你可以这样做：

$(document).append($("<style>p:before{ content: 'Intro!' } </style>"));

【讨论】：

呸！请不要内联style。
@Randomblue: 内联样式表 =/= 内联样式。