如何旋转:父元素悬停时的伪元素之前

Question

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

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

当父锚标记悬停时,我想要这样:在伪旋转之前.我尝试过这个,但它不起作用:

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

看看这个小提琴.