How to Rotate :before pseudo element when parent is hovered

css, font-awesome, hover, pseudo-class

Solution

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.

Problem

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?

Original source