What are some techniques for styling a label element with an empty for attribute using CSS?

Here is what I currently have:

<label class="filter-label" for="pv[]181">
   ::before
   white
   <span class="count">5</span>
   ::after
</label>

My goal is to modify the ::after element within that label, but so far my attempts have not been successful. I have tried the following:

.filter-label label[for="pv[]181"]::after
.filter-label label[for=pv[]181]::after
.filter-label[for=pv[]181]::after

Could someone please provide guidance on how to successfully edit this ::after element?

Thank you.

css

Answer №1

Implement the 

label.filter-label[for="pv[]181"]::after
selector in your CSS.

It seems like your CSS selector (

.filter-label label[for="pv[]181"]::after
) was incorrect. This selector was actually looking for a label element inside an element with the class filter-label.

On the other hand, my selector correctly targets a label with the class filter-label and the specified attribute value.

 
label.filter-label[for="pv[]181"]::after {
 content : "A";
 color: red;
}
label.filter-label[for="pv[]181"]::before {
 content : "B";
 color: yellow;
}
<label class="filter-label" for="pv[]181">
   
   white
   <span class="count">5</span>
   
</label>

Answer №2

Here is an example of how to achieve this effect:

Code Sample

label[for="pv[]181"]::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
}

label[for="pv[]181"]::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: blue;
}
<label class="filter-label" for="pv[]181">

   <span class="count">5</span>
   
</label>

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

Evaluate One Input Value to Determine Another Input Value

Hey there, I've made an update to the fiddle but let me clarify what I'm trying to achieve. My goal is not to implement form validation as I already have that covered with the HTML5 "required" attribute. What I'm aiming for is to customize t ...

javascriptjquerycssforms

Sliding in images with JQuery

I need help with animating the slide-in effect of 7 "card" images from the left to the center of the screen. I attempted to achieve this using the following code: function FetchCards() { $("#pack").css('margin-left', 0); $("#pack").css(& ...

javascriptjqueryhtmlcssimage

Interactive Video Effect

Seeking to create a unique video hover effect on an image where, when the mouse hovers over it, a video pops up similar to examples found on this website. I have been grappling with finding a solution for this issue over the past few months. Does anyone ...

jqueryhtmlcss

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

androidjquerycsscordova

pictures showcased in a grid that dance and sway

Hey everyone, I wanted to ask about images on a website that have a unique effect when you hover over them. On the site follow your feet website, there is a grid section of destinations and when you move your mouse over a destination, it suddenly expands a ...

cssgridview

The image wrapping feature within a div element will only function properly when there are more than one line of text present

I have come across a strange issue that I am struggling to solve. I have an image within a div with the float: left; attribute, but this styling only seems to work when the div has more than one line of text. When the div contains just one line, it ends ...

htmlcss

Adjust text size automatically to fit into a container with a fixed size

Looking to dynamically adjust the font size of user-entered text to fit within a fixed-size div. The goal is to have the text fill the box as much as possible. For example, if the div is 400px x 300px and the user enters "ABC", the font will be very large ...

jqueryhtmlcss

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

javascripthtmlcss

When zooming in or out on a mobile device, an unusual white line appears

Encountering a strange white gap on mobile devices when zooming in or out. This issue seems to be related to the use of background-color on sections. Strangely, the problem only occurs on mobile devices while zooming in, but does not appear on normal deskt ...

htmlcsswordpressbootstrap-5

Underline Rows in CSS

When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently acr ...

csshtmlrowborder

A tool that enhances the visibility and readability of web languages such as HTML, PHP, and CSS

Looking to organize my own code examples, I need a way to display my code with syntax highlighting. Similar to how Symfony framework showcases it on their website: http://prntscr.com/bqrmzk. I'm wondering if there is a JavaScript framework that can a ...

javascriptphphtmlcssgenerator

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

htmlcss

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

jqueryhtmlcss

The hover effect seems to be disabled in the third-level submenu

I need help creating a dropdown menu that shows an image when hovering over a specific item. I have checked my CSS code and HTML structure, but the image is not appearing as expected when I hover over the "Afyon White" list item. Any ideas on how to fix th ...

htmlcssdrop-down-menuhoverdropdown

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

How can I create a reverse animation using CSS?

Is there a way to reverse the animation of the circular notification in the code provided? I want the circle to move forward, covering up the info and fading out. I've tried switching the animation around but haven't had success. Any suggestions? ...

javascripthtmlcsscss-animations

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

javascriptjqueryhtmlcss

Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for creating a floating navbar with separated lists using Bootstrap 4

Struggling to position my navbar to the right and separate the list within the navbar. Despite multiple attempts, I can't seem to get it right. Here is a snippet of the code I've been working on: here is what I'm trying to achieve $def with ...

javascriptpythoncssbootstrap-4web.py

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

jqueryhtmlcssajaxinternet-explorer-10