css动态效果---鼠标滑过右侧链接，文本向右滑动

在平时我们浏览网页的时候，当鼠标滑过某个链接时，经常会看到这样的效果，链接往右滑动了一下，其实想实现这种效果很简单，只要一个transition属性就可以实现，废话不多说，上代码：

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>
   </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;
 }