Change the style of :before and :after pseudo-elements?

css, html, javascript, jquery

Solution

It's not possible to directly access pseudo-elements with Javascript as they're not part of the DOM. You can read their style using the optional second argument - which most, although not all, browsers in current use support - in `.getComputedStyle()` but you can't directly change their style.

However, you could change their style indirectly by adding in a new `style` element containing new rules. For example:

http://jsfiddle.net/sjFML/

The initial CSS assigns the `:before` pseudo-element with a green background, which is turned to black by inserting a new `style` element.

HTML:

<div id="theDiv"></div>

CSS:

#theDiv {
    height: 100px;
    background: red;
}

#theDiv:before {
    content:' ';
    display: block;
    width: 50px;
    height: 50px;
    background: green;
}

Javascript:

var styleElem = document.head.appendChild(document.createElement("style"));

styleElem.innerHTML = "#theDiv:before {background: black;}";

Problem

This is what my code looks like: ``` $('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)'); ``` This does not seem to work so I'm asking if it's even possible to add background images to shadow elements with jQuery.

Original source

Related problems