Applying two pseudo class in one element

Question

I want to apply the before and the hover classes to my footer so that my text changes on hover.

NOTE: Want a pure CSS answer.

Here is my HTML:

<footer></footer>

Here is my CSS:

footer:before
{
    color:#000;
    content:">";
    background:rgba(255,255,255,0.5);
    text-align:center;
    color:#fff;
    position:fixed;
    left: 0%;
    bottom: 0;
    width: 2%;
    height:2%;
    transition:all 2s;
}
footer:before:hover {   #got to change this
    font-size:15px;
    padding:10px;
    content:"Made Computer Sc Club ";
    background:#1abc9c;
    text-align:center;
    color:#fff;
    width: 5%;
    height:5%;
    font-size:15px;
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

Answer 1

Looks like you can simply reverse your order and you're good to go:

footer:hover:before

pseudo elements should come after pseudo classes.