translate element inside link on hover

Question

I'm trying to use a CSS3 transitions to translate an object horizontally to the right. It seems very simple but maybe I'm missing something...

This is what I have:

<h1>
    <a href="#" class="qa">Check Q&amp;A<i class="icon-right-open-gal"></i></a>
</h1>

The i is an image placed with a sprite. I would like this element to be displaced horizontally to the right once the link is hovered.

.qa{

  &:link,&:visited{
    padding: 10px;
    text-decoration: none;
    color: #f2f2f2;
    font-size: 18px;
    // @include background-image(linear-gradient(bottom, #42BA70, #49CB7A));
    background-color: #E3560D;
    @include box-shadow(inset 1px 1px rgba(255,199,170,0.5));
    @include box-sizing(border-box);
    text-transform: uppercase;
    @include transition-property(all);
    @include transition-duration(0.2s);
    @include transition-timing-function(ease-in-out);

    i{
    font-size: 13px;
    }

    span{
      font-family: helvetica-neue, helvetica, serif;
      font-size: 15px;
    }
  }


  &:hover, &:active{
    background-color: #F77902;
    @include box-shadow(inset 1px 1px rgba(248,255,170,0.5));

      i{
      -webkit-transform: translateX(40px);
      -moz-transform: translateX(40px);
      -o-transform: translateX(40px);
      transform: translateX(40px);
      }
  } 

I tried several options but none are working. Could somebody how to use it correctly. I'm using SASS for this project. I left the translate property without a compass mixing to make it more clear.

Answer 1

the problem is that the <i> tag is inline. It needs a layout in order to be translated. To do so just give it a display: inline-block attribute and all is good. See this simple fiddle http://jsfiddle.net/WxqCw/