How to Rotate :before pseudo element when parent is hovered

Question

I have added font icons to a list like this:

a:before {
    font-family: FontAwesome;
    content: "\f015";
    .. etc..
}

When the parent anchor tag is hovered, I want this :before pseudo to be rotated. I tried this, but it is not working:

a:hover:before {
            -webkit-transform:rotate(360deg);
            -moz-transform:rotate(360deg);
            -o-transform:rotate(360deg);
}

Doesnt this work? What can I do to get the rotate effect on the :before element only when the parent is hovered?

Answer 1

Try this out:

a:before {
    -webkit-transition: all 300ms 0s ease-in-out;
    transition: all 300ms 0s ease-in-out;

    content: "\f015";
    display: inline-block; //as @Rohit Azad suggested
    font-family: FontAwesome;

    // .. etc ..
}

a:hover:before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

Have a look at this fiddle.