::before and ::after pseudo-elements override my safety css. How can I override them back?
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)
Did you try a selector like ::after and ::before ?
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
The bug you linked mentions you can use the ::after and ::before selectors for targeting pseudo-elements which works for me.
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.
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