使用 jQuery 定位 :before 和 :after 伪元素 [重复]答案

【问题标题】：Target :before and :after pseudo-elements with jQuery [duplicate]使用 jQuery 定位 :before 和 :after 伪元素 [重复]
【发布时间】：2011-08-14 11:05:39
【问题描述】：

可能重复：
Manipulating CSS pseudo-elements using JQuery

在页面加载时，我希望类中的 :before 和 :after 元素出现。我已将 .lifted:before 和 .lifted:after 设置为 css 中的 opacity:0 。在准备好的文件中，我有：

$(".lifted:before").css("opacity", "1");
$(".lifted:after").css("opacity", "1");

这不起作用。据我所知，.after jQuery 操纵器仅用于插入内容。

有什么方法可以使用 jQuery 来操作这些伪元素的 css 吗？

【问题讨论】：

docs.jquery.com/DOM/Traversing/Selectors#Not_supported

标签： jquery pseudo-element

【解决方案1】：

决定采用在加载时向元素添加类，然后在 css 中对其进行操作的解决方案。

$(".lifted").addClass("on");

CSS

.lifted.on:before,
.lifted.on:after {
               opacity: 1;
    -webkit-transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
         -o-transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1); 
            transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1);
       -moz-transition: none /* Removed until FF4 hang bug is fixed */

【讨论】：

+1 以获得优雅的解决方案。添加一个类而不是努力选择一个半存在的元素是非常好的。谢谢。
但这并没有解决使用 jQuery 操作“之前”内容的问题。