How do I access style properties of pseudo-elements with jQuery? [duplicate]

You can’t use the :before and :after pseudo-elements like this. The purpose of them is to insert content before and after (respectively) the selector you have specified.

Example usage:

HTML:

<span class="a">
    Outer
    <span class="b">
        Inner
    </span>
</span>

CSS:

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

Result:

http://jsfiddle.net/mzcp6/

What happened was that the text |Inserted using :before| was inserted before (well, really, prepended into) the inner span because it was class b and a descendant of an element of class a. Basically, :before and :after don’t select; they modify.

Example:

This doesn’t work as expected:

HTML:

<span class="a">
    <p>More text</p>
    <span class="b">
        <p>More text</p>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    text-size: 100px;
}

Nothing happens:

http://jsfiddle.net/bQ2ty/

EDIT:

:before is not a valid jQuery selector: http://api.jquery.com/category/selectors/

I think you will need to use something other than :before or attempt to extract the original rule using the jQuery plugin: http://flesler.blogspot.com/2007/11/jqueryrule.html