Qtax Qtax - 1 month ago 6
CSS Question

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

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

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