How to make a hover effect for pseudo elements?

Question

I have a this setup:

Button

and this for CSS:

#button {
    color: #fff;
    display:          


        

Answer 1

#button:hover:before will change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.

While CSS won't let you style elements based on elements that come after them, it is usually possible to rig something with the same basic effect by putting :hover on a parent node, i.e.:

    

    



#overbutton {
    margin-top: 25px;
    position: relative;
}

#buttonbefore {
    position: absolute;
    background-color: blue;
    width: 25px;
    height: 25px;
    top: -25px;
}

#overbutton:hover #buttonbefore {
    // set styles that should apply to buttonbefore on button hover
}

#overbutton:hover #buttonbefore:hover {
    // unset styles that should apply on button hover
    // set styles that should apply to buttonbefore on buttonbefore hover
}