疑似要素で重ねるのはデザイン的に向いてなさそうなケースがあるので、重ねて指定する方法でどうだろう
style.css
box-shadow: 0px 10px 7px -7px rgba(0,0,0,0.1),
7px 7px 7px -7px rgba(0,0,0,0.1); /* 上だけ出さない、左右と下を陰つける */
一応見本。上側に複雑なパーツが乗っても大丈夫そう。
上のタブ部分はざっくりとbox-shadowかけただけなので、タブ部分要素の下側のshadowは直後の本文エリア要素の裏側に回ってるだけだと思う。