css - CSSタブのラベルの下の影を取り除く方法

Question

影付きのCSSタブを作成しています。ラベルの下の影を取り除くにはどうすればよいですか? 例を次に示します: http://codepen.io/ekscentrysytet/pen/QbNdEB

試してみz-index: -1;ましlabel:afterたが、影が消えます。

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;
}