How to block cosmetic pseudo elements?

[wamatt]

Is there a way to block ::before or ::after CSS elements?

For example on quora.com, there could be a need to block the suggested stories and the entire gray area.

It appears then that the gray area in question, is constructed as a ::after psuedo element on div class "Standard2ColLayout"

So while it remains certainly possible to block those suggested stories with the network filter or even cosmetic filter on a more specific element, both of those methods, will leave a large gray space behind.

While not a big deal, my curiosity is around how to do it at the source. And of course, a general solution would be more satisfying.

[gorhill]

You can block whatever CSS selector which can return a non-empty result when the CSS selector is fed to document.querySelectorAll. Unfortunately, :after and :before does not return any result.

[chrisaljoudi]

What @gorhill explained is definitely true — however, it applies only to cosmetic rules that aren't qualified with a domain name. If you do qualify them, then the hiding rules will in fact get injected.

For your case, this seems to work in my testing:

quora.com##.ContentPageFeed
quora.com##.Standard2ColLayout:after

[ghost]

_{*it it isn't working for you, use double colon quora.com##.Standard2ColLayout::after alternatively, use style-injecting rule: reddit.com##*::before:style(display:none !important;)}

[david-tap]

I'm trying to make a scrollbar wider using site##*::-webkit-scrollbar-thumb:style(width: 18px !important) but it's not taking effect. I tried using -webkit-scrollbar as well. Am I doing it wrong, or did the behavior change?