움직이는 텍스트없이 호버에 문자 추가

Question

호버에 문자를 추가하려고했으나 문자가 나타날 때 텍스트를 오른쪽으로 이동하지 않고 수행하고 싶습니다.

각 정적 앞에 공백 문자가 하나 있으면 작업 할 수 있지만이를 수행하는 방법을 잘 모를 것입니다. 코드는 다음과 같습니다 :

ul{ 
 
    list-style:none; 
 
    -webkit-padding-start: 0px; 
 
    } 
 

 
a:hover::before { 
 
    content:'> '; 
 
}

<ul> 
 
    <li><a href="#">Journalist</a></li> 
 
    <li><a href="#">Writer</a></li> 
 
    <li><a href="#">Publications designer</a></li> 
 
</ul>

http://jsfiddle.net/Tankucukhas/bobqowde/1/

Answer 1

이 시도 :

ul { 
    list-style:none; 
    -webkit-padding-start: 0px; 
    padding-left: 20px; /* some value to give space for special letter */ 
} 
a { 
    position: relative; 
} 
a:hover::before { 
    content:'> '; 
    position: absolute; 
    left: -20px; /* equal to padding-left */ 
} 

Working Fiddle

을

위의 피들에서 padding-left 값은 left과 같아야합니다.

그냥 이해, 당신은 또한 li