CSS Dynamic Effects---the mouse over the right side of the link, the text swipe right

In peacetime when we browse the Web, when the mouse over a link, often see this effect, the link to the right slide a bit, in fact, want to achieve this effect is very simple, as long as a transition attribute can be achieved, nonsense not much said, on the code:

The HTML  

<ul>   <li>      <a href= "#" > Hover over Me </a>   </li>   <li>      <a href= "#" > Hover over Me </a>   </li>   <li>      <a href= ' # ' > Hover over Me </a>< c12/></li>   <li>      <a href= "#" > Hover over Me </a>   </li></ul>

The CSS

UL a {    -webkit-transition:padding. 4s;    -moz-transition:padding. 4s;    -o-transition:padding. 4s;    Transition:padding. 4s; } a:hover {    padding-left:6px;}

CSS Dynamic Effects---the mouse over the right side of the link, the text swipe right