Detecting support for :before/:after pseudo-elements

Replying to @Modernizr: “Do you know of a way to reliably detect support for :before/:after pseudo-elements in a browser? We’d love to know!” https://twitter.com/#!/Modernizr/status/4526265067372546

HTML

<p>Do I support <code>:before</code>? <b id="before-results">Loading…</b></p>
<p>Do I support <code>:after</code>? <b id="after-results">Loading…</b></p>

CSS

p {
    margin-top:1em;
    margin-bottom:1em;
}
body {
    font-size:14px;
    font-family:sans-serif;
}
blockquote {
    margin-left:2em;
    font-style:italic;
}

footer {
    display:block;
    margin-top:1em;
    border-top:solid 1px gray;
    padding-top:0.5em;
    font-size:smaller;
    font-style:italic;
}

JavaScript

// Note: this is quick and dirty and would obviously need to be cleaned up for inclusion in Modernizr

var head = document.getElementsByTagName('head')[0];

var style = document.createElement('style');
style.type = 'text/css';

var rules = [
    '#modernizr-before, #modernizr-after { visibility:hidden; position:absolute; } ',
    '#modernizr-before:before { content: "(-:"; }',
    '#modernizr-after:after { content: ":-)"; }'
];

// thanks http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
if(style.styleSheet){
    style.styleSheet.cssText = rules.join('');
}
else {
    style.appendChild(document.createTextNode(rules.join('')));
}

head.appendChild(style);

var beforeDiv = document.createElement('div');
beforeDiv.id = "modernizr-before";
document.body.appendChild(beforeDiv);

var afterDiv = document.createElement('div');
afterDiv.id = "modernizr-after";
document.body.appendChild(afterDiv);

var hasBefore = beforeDiv.offsetWidth > 0;
var hasAfter = afterDiv.offsetWidth > 0;



// Clean up
style.parentNode.removeChild(style);
afterDiv.parentNode.removeChild(afterDiv);
beforeDiv.parentNode.removeChild(beforeDiv);


// Tell the world!
document.getElementById("before-results").innerHTML = hasBefore ? "YES :-)" : "No :-(";
document.getElementById("before-results").style.color = hasBefore ? "green" : "red";
document.getElementById("after-results").innerHTML = hasAfter ? "YES :-)" : "No :-(";
document.getElementById("after-results").style.color = hasAfter ? "green" : "red";