user1645290 user1645290 - 23 days ago 9
CSS Question

css3: Selecting the :before pseudo element when the link is active

I need to select the before pseudo element when the link is active,but I am able to select the before pseudo element when hovering the link.

enter image description here

On loading the page the first link(browse) is active and I need the same effect of hover while active.

To select the before pseudo element while hovering:

.breadcrumb a:hover:before {
background: black;
border: 1px solid white;
color: white;
}


To select the before pseudo element while active(I am trying the below but it is not working):

.breadcrumb a:active:before {
background: black;
border: 1px solid white;
color: white;
}


please find the below jsfiddle for better clarity:
https://jsfiddle.net/diasraphael88/ygj40pn7/

Answer

You can use the active class or :hover to accomplish this.

.breadcrumb a.active:before {
    background: black;
    border: 1px solid white;
    color: white;
}

OR

 .breadcrumb a:focus:before {
        background: black;
        border: 1px solid white;
        color: white;
}