호버상의 링크 요소 내부 번역

Question

CSS3 전환을 사용하여 객체를 오른쪽으로 수평으로 변환하려고합니다. 매우 간단 보이지만 어쩌면 내가 뭔가를 놓친거야 ...

이 내가 무엇을 가지고 :

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

i는 스프라이트와 함께 배치 이미지입니다. 나는이 요소가 링크를 잡아 당기면 오른쪽으로 수평으로 옮겨 놓기를 원합니다.

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

몇 가지 옵션을 시도했지만 아무도 작동하지 않습니다. 누군가 그것을 올바르게 사용할 수 있습니까? 이 프로젝트에 SASS를 사용하고 있습니다. 더 명확하게하기 위해 나침반을 혼합하지 않고 번역 속성을 남겼습니다.

Answer 1

문제는 <i> 태그가 인라인 인 것입니다. 번역을 위해서는 레이아웃이 필요합니다. 그렇게하려면 display: inline-block 속성을 지정하고 모두 좋다. 이 간단한 바이올린을보십시오 http://jsfiddle.net/WxqCw/