如何用css控制伪元素，再也不用多写个div

为什么80%的码农都做不了架构师？>>>   

使用伪元素实现hover动态效果。

以下是通过控制伪元素的背景来实现一个图片从右边向左边进入，看懂了就很容易明白。

欢迎交流

.nav {
  //line-height: @navbar_height;
  li{
    margin-left: 20px;
    width: 128px;
    height: 46px;
    text-align: center;
    position: relative;
    &:before{
      width: 128px;
      height: 46px;
      content:"";
      position: absolute;
      top:0;
      left:0;
      background-image: url(../../assets/images/navbarBg.png);
      background-size: cover;
      background-position: 80px;
      background-repeat: no-repeat;
      transition: all .4s linear;
      opacity: 0;
      z-index: -1;
    }
    a {
      text-align: center;
      padding: 0 25px 10px 2px;
      border-bottom: 5px solid transparent;
      font-size: @nav_font_size;
      color: @font_base_color_dark;
      line-height: 46px;
      opacity: 1;
    }
    &:hover::before{
      background-position: 0;
      opacity: 1;
    }
    &:hover a {
      color: #fff;
    }
    .active0 {
      border-bottom: 3px solid @font_base_color;
      //color:@nav_hover;
    }
  }
}

转载于:https://my.oschina.net/kaykie/blog/1057795