Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements by providing a CSS selector.

The specific element I am trying to block is a div with a randomly-generated class name (making it difficult to use div.class-name for blocking). The consistent factor is a pseudo ::before element with the content: "from our network".

My inquiry is: is there a way to select an element based on the content of its ::before, without resorting to JavaScript and using CSS exclusively?

csscss-selectorspseudo-elementadblock

Answer №1

Are you trying to target an element based on its ::before content?

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

It may not be possible to do that directly.

However, you can still target specific characters within the class name like this:

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

}

Check out an example here: https://codepen.io/gilbertlucas46/pen/xBjKOX

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to transform a 4-column CSS table into a 2-column layout for mobile and tablet viewing

For my latest project, I am faced with the challenge of creating a responsive table that transforms from 5 columns to 2 columns on smaller screens. While using complex jQuery is an option, I prefer a more semantic approach. Additionally, I need to incorpor ...

htmlcsshtml-table

Showing a div with a smooth fade-in effect while switching its display property to inline using jQuery

Currently, I am working on a project that involves implementing a "side pop up". To ensure it doesn't flicker like it does with jQuery's "hide()" method, I want to start by setting the display property to none using CSS. My main question is: - Ho ...

javascriptjqueryhtmlcss

Using jQuery and CSS to Filter and Sort Content

I need help with filtering a list of content based on their class names. The goal is to show specific items when a user clicks on one of two menus. Some items have multiple classes and users should be able to filter by both menus simultaneously. Currently ...

javascriptjqueryhtmlcss

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

javascripthtmlcss

What is the best way to prevent blank space when splitting a div into two parts?

Currently in the process of working on a school project that involves creating a website with an integrated database. The foundation for this project is an existing website from a previous assignment, created using PHP/HTML. The layout of my prior website ...

htmlcss

Click on the link that surrounds an inline-block span in Internet Explorer

In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span. I could use cursor:pointer to fix this issue, ...

internet-explorerhtmlcss

What was the inspiration behind Spotify's section design?

Spotify has cleverly hidden the overflowing content without showing a scrollbar, allowing users to swipe through the list. How did they achieve this? I am currently using tailwindcss if that makes a difference. https://i.stack.imgur.com/z59yv.png ...

cssreactjstailwind-css

What is the best way to retrieve the height of a <DIV> element without factoring in the presence of a horizontal scrollbar with

I have created a unique jQuery plugin that involves utilizing two nested <DIV> elements. The outer div is set with a fixed width and overflow: scroll, while the inner div (which is wider) houses the content for scrolling purposes. Everything is fun ...

javascriptjquerycssscrollbar

What do you do when you need to hide a table column that has a colspan

I have been searching for a solution to my unique table structure, but I haven't found any that match my situation. When attempting to hide column A or B, the following code works perfectly: $('table td:nth-child(1),table th:nth-child(1)') ...

jqueryhtmlcsscss-selectors

"Embedding social content within an iframe may result in the element being unresponsive

I have a setup where I'm utilizing social embed to include Instagram content in the footer. When I insert the provided iframe code, the layout looks correct but the content is not clickable. <iframe src="https://embedsocial.com/facebook_album ...

javascripthtmlcssiframebootstrap-4

Is there a method to ensure equal alignment of the <div class="card"> elements in Bootstrap?

I need help figuring out how to align this card uniformly with the others: https://i.sstatic.net/x2wZ2.png In the image below, you can see that the card for the top reason for downtime doesn't match the other cards. I want them all to be the same he ...

cssbootstrap-4frontend

Tips for displaying an asp.net form using javascript functions

I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate ...

javascripthtmlcssasp.net

The make-xx-column() mixins in Bootstrap are malfunctioning

After careful examination, it looks like some of the Bootstrap mixins are not functioning as expected. Specifically, the .make-md-column() and .make-sm-column() seem to have no effect at all. Initially, I suspected that WebEssentials was not compiling the ...

csstwitter-bootstrapless

Issue with positioning Bootstrap tooltip on the right side causing it to not display correctly

Currently, the tooltip I have is functioning properly: However, my main requirement is to align it to the right. So, when I use .pull-right, it appears like this: This is the HTML code snippet: <div class="wrapper">Login <span rel= ...

jqueryhtmlcsstwitter-bootstrap

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling: input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } input[type='radio'] { margin:0 ...

asp.netcss

Is there a way to style the nav-item element specifically on the current page I'm viewing?

I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page). https://i.sstatic.net/maDzc.png This is the HTML code I am usin ...

htmlcssvue.jsnuxt.jsbootstrap-vue

Injecting CSS into a dynamically created element within a Polymer component using jQuery

Having an issue when trying to add a CSS class to a jQuery created element within a Polymer component. The code for the Polymer component is as follows: <dom-module id="image-add"> <style> .image { height: 100%; } </sty ...

jquerycsspolymer

Unforeseen rotation happening in CSS animation

I find myself struggling with my math skills from junior high. My goal is to rotate two divs around the Y axis in opposite directions. I have set up two animations for this purpose: @-webkit-keyframes first{ 0% { -webkit-transform: rotateY(0); } ...

csscss-animations

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

htmlcsscss-transitions