Search code examples
csscss-selectorspseudo-elementadblock

CSS rule to select pseudo-elements

I'm using Brave browser to block ads online. Some sites started injecting ads into HTML on their server side. Brave currently only allows blocking elements by providing a CSS selector.

The element I want to block is a div with a randomly-generated class name (so using div.class-name works only until refresh). The only constant is a pseudo ::before element with content: "from our network".

My question is: can I select an element based on the content of its ::before, without using any JavaScript (CSS only)?

Solution

  • You want to select an element base on ::before content?

    div::after {
  content: "generated content";
}

    I don't think that's possible

    You can however select few characters in the class name

    div[class^='yourclassname'], div[class*=' yourclassname']{

}

    https://codepen.io/gilbertlucas46/pen/xBjKOX