css 小技巧汇总

关于 transition 是放在a 上还是放在a:hover上

如果transition 加上a 上， 鼠标悬浮a:hover上有正向过渡效果，鼠标离开a:hover时，有反向过渡效果。
如果transition 加在a:hover上，鼠标悬浮时，有正向效果，离开时没有反向效果。

a和a:hover上都加上 transition 也是可以的。

// html
<li>
<a href="">1</a>
<a href="">1</a>
</li>

// css (less)
a{  
    width:100px;
    height:20x;
    display:block;          
    &:after{
        content: '';
        display: block;
        position: absolute;
        left:50%; right:50%;
        bottom:0; height: 4px;
        opacity: 0;
        background-color: @mainCL-3;
        transition: all 0.5s ease 0s;
    }
    &:hover:after{
        left: 1%;right: 1%;
        opacity: 1;
    }
}