css - How to get rid of the bottom shadow in label of the css tabs

Question

I'm making the css tabs with shadows. How can I get rid of the bottom shadow in label? Here's an example: http://codepen.io/ekscentrysytet/pen/QbNdEB

I've tried z-index: -1; for label:after but shadow disappears.

Answer 1

使用伪元素:before（你已经使用过after）制作一个白色的小矩形来隐藏它怎么样？

label:before {
  content:'';
  display:block;
  width:100%;
  height:15px;
  background-color:#fff;
  position:absolute;
  bottom:-11px;
  left:0;
  z-index:10;  
}

密码笔

Answer 2

尝试这个：

.tabinator input:checked + label:after {
     border-bottom: none;
     box-shadow: 0 -8px 15px #939393;
}