How to rotate li:before independently of the li?

Question

How to rotate li:before independently of the li?

I tried this,but it doesn't work:

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

Here's the problem: http://jsfiddle.net/n6cPb/1/

This is the 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>

And this is the 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;
}

This is the image of how it works now, and how I want it to work.

Answer 1

the pseudo elements ::before and ::after are actually inside the <li>

so if you are rotating the <li> by 17deg they will do the same, unless you explicitly reset their position:

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