Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

::before and ::after pseudo-elements override my safety css. How can I override them back?

  • 4 cavab
  • 0 have this problem
  • 1 view
  • Last reply by cor-el

more options

Animation triggers my migraines.

Man websites use transition and animation timing functions such as "ease in-out" to animate the interface. I try to block this. Among other tools I use userContent,css, including the following:

  • {animation-timing-function: step-start !important}
  • {transition-timing-function: step-start !important}

This works to de-animate regular css elements, but not ::before and ::after pseudo-elements.

The current css standards do not apply user css to pseudo-elements. I've written to the WCAG about the issue.

https://bugzilla.mozilla.org/show_bug.cgi?id=1865572

https://github.com/w3c/wcag3/issues/40

But I really really need some way to de-animate these, because they trigger my migraines. Aside from css fixes, I often reduce the frame rate in about:config, but can't always do that, disable smooth scrolling, disable animated gifs and animated pngs, disable autoplay, block various non-scrolling elements using either css or uBlock Origin, etc.

Animation triggers my migraines. Man websites use transition and animation timing functions such as "ease in-out" to animate the interface. I try to block this. Among other tools I use userContent,css, including the following: *{animation-timing-function: step-start !important} *{transition-timing-function: step-start !important} This works to de-animate regular css elements, but not ::before and ::after pseudo-elements. The current css standards do not apply user css to pseudo-elements. I've written to the WCAG about the issue. https://bugzilla.mozilla.org/show_bug.cgi?id=1865572 https://github.com/w3c/wcag3/issues/40 But I really really need some way to de-animate these, because they trigger my migraines. Aside from css fixes, I often reduce the frame rate in about:config, but can't always do that, disable smooth scrolling, disable animated gifs and animated pngs, disable autoplay, block various non-scrolling elements using either css or uBlock Origin, etc.

Chosen solution

::after and ::before are global selectors, they only apply to specific pseudo-elements like which are mentioned in the MDN article.

*, ::before, ::after {animation-timing-function: step-start !important}
*, ::before, ::after {transition-timing-function: step-start !important}
Read this answer in context 👍 0

All Replies (4)

more options

Did you try a selector like ::after and ::before ?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

more options

The bug you linked mentions you can use the ::after and ::before selectors for targeting pseudo-elements which works for me.

more options

Uh, no.

I'm using global css, not domain-specific or element-specific css, because I need to de-animate *every* transition without having to diagnose and code for each website, with migraines from the still-animated transitions.

I'm not a programmer, and I can't read most of the online css manuals, so I may have missed something.

more options

Seçilmiş Həll

::after and ::before are global selectors, they only apply to specific pseudo-elements like which are mentioned in the MDN article.

*, ::before, ::after {animation-timing-function: step-start !important}
*, ::before, ::after {transition-timing-function: step-start !important}

Modified by cor-el