如何旋转 li:before 独立于 li？

Question

如何独立于 li 旋转 li:before？

我试过这个，但它不起作用：

-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);

这是问题所在：http://jsfiddle.net/n6cPb/1/

这是 HTML：

<nav id="menu">
    <ul>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
    </ul>
</nav>

这是 CSS：

#menu {
    width: 180px;
    padding: 0 10px 10px 10px;
    float:left;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:15px;
}
#menu ul{
    list-style-type:none;
}
#menu li{
    margin:20px 0 20px 0;
    height:15px;
    background-color:#404468;
    border: 1px solid transparent;
    border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    border-width:17px 17px 17px 17px;
    -moz-border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    -webkit-border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    border-image-outset: 10px;
}

#menu li:nth-child(odd){
    -ms-transform:rotate(1deg); 
    -webkit-transform:rotate(1deg);
    transform:rotate(1deg);
}
#menu li:nth-child(even){
    -ms-transform:rotate(-1deg); 
    -webkit-transform:rotate(-1deg);
    transform:rotate(-1deg);
}
#menu li:hover{
   -ms-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
}
#menu a {
    display:block;
    height:100%;
    width:100%;
    color:#b7c4d8;
    text-decoration:none;
}
#menu a:hover {
    color:#Ff0;
}
#menu li:before{ 
    display:block;
    position:absolute;
    left:37px;
    bottom:35px;
    content:'';
margin:0 auto;
height:20px;
width:30px;
    min-width:30px;
    min-height:20px;
    background: url('http://users.atw.hu/darksoul90/egyeb/lanc.svg');
    background-repeat: repeat-y;
    background-position: center center;
}

这是它现在如何工作的图像，以及我希望它如何工作。

Answer 1

伪元素 ::before 和 ::after 实际上 在<li>

因此，如果您将 <li> 旋转 17 度，它们也会这样做， 除非你明确重置他们的位置：

li:hover
     {transform:rotate(17deg);}
li:hover::before, li:hover::after
     {transform:rotate(-17deg);}