作品集目录-分组-hover特效

代码如下：

<style>	
.menu-box{width:300px;height:100%;background-color:#111;padding:50px 0 0 80px;position:fixed;left:0px;top:0px;opacity:0.9;}
.nav-box {height:1200px;}
.menu-box h4{color:#00B47F;line-height:50px;height:10px;}
.menu-box font{color:#028757;font-size:14px;line-height:30px;}	

.nav_list {display:flex;flex-direction:column;}
.nav_list:not(:first-child) {margin-top:4rem;}	
.nav_t {font-size:16px;line-height:10px;margin-left:-12px;color:#537A72;}
.nav__item {text-decoration:none;position:relative;transition:all 0.2s ease-in-out;color:#00B47F;font-size:18px;line-height:30px;}
.nav__item::before {content:"";height:1px;width:0;background-color:#00B47F;position:absolute;top:50%;left:0;transform:translateY(-50%);transition:all 0.5s ease-in-out;}
.nav__item:hover {padding-left:calc(2rem + 1rem);color:#00B47F;transition:all 0.3s ease-in-out;}
.nav__item:hover::before {width:2.5rem;}		
</style>

<div class="menu-box">

  <h4>作品集</h4>
  <font>Archive</font>
  <br> <br> <br> 
  <div class="nav-box">
    <nav class="nav_list">
      <p class="nav_t"> 「 摄影作品 」</p>
      <a class="nav__item" href="#">人像摄影</a>
      <a class="nav__item" href="#">风光摄影</a>
      <a class="nav__item" href="#">静物摆拍</a>
      <a class="nav__item" href="#">延时摄影</a>
    </nav>

    <nav class="nav_list">
      <p class="nav_t"> 「 电商作品 」</p>
      <a class="nav__item" href="#">首页</a>
      <a class="nav__item" href="#">主图</a>
      <a class="nav__item" href="#">详情页</a>
      <a class="nav__item" href="#">印刷</a>
    </nav>


    <nav class="nav_list">
      <p class="nav_t"> 「 视频创作 」</p>
      <a class="nav__item" href="#">剧情片</a>
      <a class="nav__item" href="#">幽默搞笑</a>
      <a class="nav__item" href="#">生活写真</a>
      <a class="nav__item" href="#">学习教程</a>
    </nav>

  </div>  
</div>