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 fhreagra
  • 0 leis an bhfadhb seo
  • 24 views
  • Freagra is déanaí ó 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.

Réiteach roghnaithe

::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

Helpful?

more options

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

Helpful?

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.

Helpful?

more options

Réiteach Roghnaithe

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

Athraithe ag cor-el ar

Helpful?

Cuir ceist

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.