jQuery和伪元素

Question

我尝试使用:after动态更改CSS中定义的元素的位置。 使用这个：

$(function(){
    $('div::after').css({'top':'20px'})
})

但它不起作用。有没有办法改变立场？

Answer 1

你做不到。由:after或:before创建的内容不属于DOM，因此无法进行选择或修改。

如果您查看此example fiddle并检查Firebug中的DOM或类似内容，您将看到DOM树中不存在伪元素。

一个潜在的解决方案是将一个类应用于您想要更改的元素，并在CSS中适当地设置该类：

$("div").addClass("newClass");

见this fiddle for an example。

Answer 2

添加CSS：

p.special:before {
    content: "bar";
    position: absolute;
    top : 10px;
}

假设上面放置代码的样式表是页面上的第一个代码，请使用它来更改它：

document.styleSheets[0].addRule('p.special:before','top: 15px;');