Is there any way to (robustly) reset any possible :after and :before CSS rules for a newly created element?

Usually you can just set the style rules you want to reset on the element directly (with !important if you want to be sure), but I don't know of any way of changing rules defined in :after on the element only.

(Only has to work with Chrome, if at all possible.)

An example at jsFiddle.

The content added with the :before/:after rules is affecting the value returned by clientHeight.

Is there any way to (robustly) reset any possible :after and :before CSS rules for a newly created element?

Usually you can just set the style rules you want to reset on the element directly (with !important if you want to be sure), but I don't know of any way of changing rules defined in :after on the element only.

(Only has to work with Chrome, if at all possible.)

An example at jsFiddle.

The content added with the :before/:after rules is affecting the value returned by clientHeight.

• javascript
• css
• google-chrome

• 2 also see stackoverflow./questions/5041494/… – benesch Commented Mar 21, 2012 at 3:33
• @primatology, well, seems that BoltClock answered it there: stackoverflow./a/5041526/107152 But maybe Chrome has some special way of accessing/modifying those? – Qtax Commented Mar 21, 2012 at 3:39
• possible duplicate of Setting CSS pseudo-class rules from JavaScript – user123444555621 Commented Mar 21, 2012 at 4:25
• @Pumbaa80, I'm not quite satisfied with any of those answers, though. – benesch Commented Mar 21, 2012 at 4:29

4 Answers 4

There is a DOM2 API for that matter. The correct way to do this is

document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';

Unfortunately, no browser has implemented it. (Webkit returns null, Firefox has no such method). It looks like CSS3 doesn't even bother talking about that anymore, maybe because the usecases are very rare.

So you're gonna have to do some id/className magic as suggested above or in the other thread

I'd just assign a class name to the new elements that does not have :before / :after content.

Example - http://jsfiddle/84kZK/1/

Ah, okay. You can write new CSS that resets the offending :before/:after pseudo-elements:

function resetPsuedo(el) {
    if (!el.id) el.id = makeId();
    var selector = "#" + el.id;

    var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    rules = document.createTextNode(selector + ":before, " + selector + ":after { content: '' }");

    style.type = 'text/css';
    if(style.styleSheet)
        style.styleSheet.cssText = rules.nodeValue;
    else style.appendChild(rules);
    head.appendChild(style);
}

function makeId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

    for (var i=0; i < 15; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

​Assigning a random ID to the element you pass in (if it doesn't have one) allows you to hack-up inline styles—rather than accessing el.beforeStyle, you can use CSS selectors: el#rkhjr828t9g:before.

You may need to add more rules to fully reset the styles. jsFiddle: view me!

http://www.w3/TR/CSS21/generate.html#before-after-content

​The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

For example, the following document fragment and style sheet:

<p> Text </p>                   p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<p><span>Some</span> Text </p>  span { display: block }

Similarly, the following document fragment and style sheet:

<h2> Header </h2>     h2:after { display: block; content: 'Thing'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }

Use ruleSelector("ref::before")[0].style instead of document.getOverrideStyle(ref, ':before').

http://jsfiddle/s3fv8e5v/4/

<!DOCTYPE html>
<title>CSS</title>

<style>
    body {
        font: 200%/1.45 charter;
    }
    ref::before {
        content: '\00A7';
        letter-spacing: .1em;
    }
</style>

<article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article>

<script>
    function ruleSelector(selector) {
        function uni(selector) {
            return selector.replace(/::/g, ':') // for Firefox
        }
        return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
            return Array.prototype.slice.call(x.cssRules);
        })), function(x) {
            return uni(x.selectorText) === uni(selector);
        });
    }

    var toggle = false, 
        pseudo = ruleSelector("ref::before").slice(-1);

    document.querySelector("article").onclick = function() {
        pseudo.forEach(function(rule) {
            if (toggle = !toggle)
                rule.style.color = "red";
            else
                rule.style.color = "black";
        });
    }
</script>