css3 transform on hover :after

[nofel]

I got element which is used after some pseudo class, it’s working fine, until when i want it to flip upside down and add a tranform effect, it fails. The end result is the whole li transforming.

   .dropdown-menu li a:first-child:nth-last-child(2):after {
      content: '';
      background-color: #fff;
      background:url('../img/open.png') no-repeat;
      width: 18px;
      height: 10px;
      display:inline-block;
      margin:-15px 0 0 35px;
      float: right;

}
.dropdown-menu li a:hover{
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Safari */
        transform: rotate(180deg);
        }

Also is it worth doing it in css or jquery, as css3 support might be limited?

[Gandalf]

I very much doubt you can target a pseudo element. Perhaps you need to provide a second image (or use a sprite) for the hover effect.