3

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.

4

4 Answers 4

8

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

2
  • 1
    Good to know there is (was?) a thought out API for this, too bad it's not implemented. Good sources, +1.
    – Qtax
    Commented Mar 21, 2012 at 5:36
  • Firefox tracks this bug for implementing getOverrideStyle: opened 21 years ago, inactive for the last 3 years (at least 7 years if you don’t count the automatic bot that reduced the bug’s priority). Commented May 31, 2021 at 3:40
2

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

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

1
  • It would work, but I'd have to check that the class is not used anywhere else (currently or in the future), making it less reliable (theoretically that is). I was hoping for something (in)directly accessible via the element, e.g elem.beforeStyle would be great. ;-)
    – Qtax
    Commented Mar 21, 2012 at 3:46
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.org/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; }
4
  • No they don't seem to create any DOM elements according to stackoverflow.com/a/5041526/107152
    – Qtax
    Commented Mar 21, 2012 at 3:47
  • @Qtax, though they don't add any elements accessible to the DOM, they behave just like child spans added to the element. See edits.
    – benesch
    Commented Mar 21, 2012 at 3:54
  • That would also affect other elements for which these rules apply, which is not desired.
    – Qtax
    Commented Mar 21, 2012 at 4:02
  • @Qtax, randomly-generated IDs will do the trick :). Just pass in the element and the function will take care of the rest. I know this is far from ideal, but it's the best we've got.
    – benesch
    Commented Mar 21, 2012 at 4:17
0

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

http://jsfiddle.net/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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.