How do I access style properties of pseudo-element

Question

This question already has answers here:

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery (22 answers)

Closed 9 months ago.

For context, this is a followup to an earlier question. Rather than digging through cssRules, I'd like to base the logic on jQuery selectors that search for the effects of those rules.

Given default properties of

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

that are selectively modified as in

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

how can I select pseudo-elements whose respective background positions have default values? Copying the selector as in

GM_log("size = " + $(".commentarea .author:before").size());

matches nothing. Trying .siblings() with

$(".commentarea .author")
  .map(function(i) {
         GM_log($(this)
                  .siblings()
                  .map(function (i) { return $(this).css("background-image") })
                  .get()
                  .join(", "))
       });

produces only none values.

For full details, see the live page. Is this possible?

Answer 1

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