Is there any way to reset :after/:before CSS rules for an element?

Question

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.

also see http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery — benesch, Mar 21 '12 at 03:33
@primatology, well, seems that BoltClock answered it there: http://stackoverflow.com/a/5041526/107152 But maybe Chrome has some special way of accessing/modifying those? — Qtax, Mar 21 '12 at 03:39
possible duplicate of [Setting CSS pseudo-class rules from JavaScript](http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) — user123444555621, Mar 21 '12 at 04:25
@Pumbaa80, I'm not quite satisfied with any of those answers, though. — benesch, Mar 21 '12 at 04:29

score 8 · Accepted Answer · edited May 23 '17 at 12:00

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

edited May 23 '17 at 12:00

Community

1
1

answered Mar 21 '12 at 05:08

user123444555621

148,182
27
114
126

1

Good to know there is (was?) a thought out API for this, too bad it's not implemented. Good sources, +1. – Qtax Mar 21 '12 at 05:36
Firefox tracks [this bug for implementing `getOverrideStyle`](//bugzilla.mozilla.org/show_bug.cgi?id=45424): 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). – Sebastian Simon May 31 '21 at 03:40

score 2 · Answer 2 · answered Mar 21 '12 at 03:36

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/

answered Mar 21 '12 at 03:36

Phil

157,677
23
242
245

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 Mar 21 '12 at 03:46

benesch · Answer 3 · 2012-03-21T04:24:10.573

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; }

No they don't seem to create any DOM elements according to http://stackoverflow.com/a/5041526/107152 — Qtax, Mar 21 '12 at 03: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, Mar 21 '12 at 03:54
That would also affect other elements for which these rules apply, which is not desired. — Qtax, Mar 21 '12 at 04: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, Mar 21 '12 at 04:17

bumfo · Answer 4 · 2014-12-30T15:17:24.103

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>

Is there any way to reset :after/:before CSS rules for an element?

4 Answers4

Linked

Related