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.

Answer 1

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