html - CSS:用 :after 创建的阴影正在流血

Question

我正在尝试制作一个标签文件夹设计，标签位于左侧，并在除非事件标签之外的所有内容周围使用框阴影。我的问题是，我为事件选项卡创建的阴影是使用 :after 创建的，因为它是一个新的堆叠上下文，所以它会渗入内容区域。

 nav li.active:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: -1;
   left: 0;
   top: 0;
   box-shadow: 0px 0 10px rgba(0,0,0,0.5);
 }

我之前有一个解决方案，我用一个白框来覆盖由事件选项卡上的框阴影创建的右侧阴影，但我不满意所以我尝试寻找另一种方法但似乎无法得到它去工作。

这是带有我的代码模型的代码笔。

http://codepen.io/anon/pen/zmabC

那么问题来了，有没有人知道在布局周围添加阴影而又不让阴影渗入内容区域的好方法。

编辑:我完全赞成使用 :after 的其他想法。我唯一想尝试避免的是创建影子对象并使用 javascript 定位它，或者完全使用 javascript 来完成此操作。

Answer 1

更新:请检查。

这次我使用了使用 Adob​​e Photoshop 创建的阴影图像作为 :after 伪选择器的背景图像。

nav {
  display: inline-block;
  vertical-align: top;
}

nav ul {
  float: right:
}

nav li {
  list-style-type: none;
  display: block;
  margin-bottom: 9px;
  background: #ff0;
  position: relative;
  right: -5px;
  padding: 5px;
}

nav li.active {
  background: #fff;
  right: -4px;
  z-index: 2;
}

nav li.active:after {
  content: "";
  width: 70px;
  height: 48px;
  position: absolute;
  z-index: -1;
  top: -10px;
  background: url(http://s28.postimg.org/6lkx1r7gp/bgshadow.png);
  left: -20px;
  opacity: 0.6
}

section {
  background: #fff;
  width: 500px;
  height: 200px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 1;
  position: relative;
  display: inline-block;
}

<div>
  <nav>
    <ul>
      <li class="active">Test</li>
      <li>Test 2</li>
      <li>Test 3</li>
    </ul>
  </nav>
  <section>
  </section>
</div>