Hover effect for pseudoelements:

For example, if there is an element with a hover effect on it, the hover effect will only be displayed when the element hover.

Chemical element:

li {
    background: red;
}

li:after {
    border: 1px solid blue;    
}
Copy the code

Hover (); hover (); hover ();

For example, following the code in the above example, continue with the following code:

li:hover:after {
    border: 1px solid blue;
}
Copy the code

With the above code, you can display the pseudo-element only when it hover. Notice the order, hover in front, after in the back.

Reference: stackoverflow.com/questions/1…