Select :after pseudo class/element

Question

In CSS, I have used body:after to add content, I want to in jQuery get its height. How might I do that?

I read from here such pseudo elements are for modifications and thus unselectable? I seem to be unable to even use $("body > :last-child") to select the last child which should be the :after?

score 5 · Accepted Answer · answered Mar 18 '11 at 05:38

Note that the content you add using :after and content isn't a node - it isn't either an element nor text in your document. You can see this with FireBug: in this screenshot, my HTML contains the word "hello" but the word "world!" is added using CSS:

Screenshot of a Hello World page where the word World is added with CSS content. FireBug is open, clearly showing that the CSS content does not add an element to the DOM

What you can do is use getComputedStyle to find out what the content is, like the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Select :after pseudo class/element</title>
        <style type="text/css">
        #msg:after {
            content:" World!"
        }
        </style>
        <script type="text/javascript">
        window.onload = function() {
            if(window.getComputedStyle) {
                var element = document.getElementById("msg");
                var style = window.getComputedStyle(element,':after')
                alert(style.content);
            }
            else {
                alert("This browser sucks!"); // ;)
            }
        }
        </script>
    </head>
    <body>
        <h1>
            <span id="msg">Hello</span>
        </h1>
    </body>
</html>

... unfortunately, this gives you access to the content but not to the height :(

@MikeHometchko - Well I like you then, buddy! :D – Richard JP Le Guen Oct 19 '12 at 18:06 — Richard JP Le Guen, Oct 19 '12 at 18:06

Select :after pseudo class/element

1 Answers1

Linked