css - 如何旋转:before pseudo element when parent is hovered

Question

我已将字体图标添加到这样的列表中:

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

当父 anchor 标记悬停时，我希望这个 :before pseudo 被旋转。我试过这个，但它不起作用:

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

这行不行？仅当父元素悬停时，我该怎么做才能在 :before 元素上获得旋转效果？

Answer 1

试试这个:

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);
}

看看这个fiddle .