前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何用css控制伪元素,再也不用多写个div

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

作者头像
杭州前端工程师
发布2018-06-15 12:11:06
1.2K1
发布2018-06-15 12:11:06
举报
文章被收录于专栏:前端大白专栏

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

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

欢迎交流

代码语言:javascript
复制
.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;
    }
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档