搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

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

  • 4 回覆
  • 0 有這個問題
  • 19 次檢視
  • 最近回覆由 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.

被選擇的解決方法

::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}
從原來的回覆中察看解決方案 👍 0

所有回覆 (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

選擇的解決方法

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

由 cor-el 於 修改

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先登入帳號 來回覆文章。還沒有帳號的話,只能發問新問題