Значок CSS3 «плюс» с теневой тенью, которая не перекрывается

Question

Я занимаюсь созданием фигур в CSS. Я нахожу, что все отлично и денди, пока вы не захотите добавить box-shadow или border к элементу, который был создан как псевдоним ::before, так и ::after.

Вот пример, который я собрал значок плюс (+), сделанный с двумя элементами. Я пытаюсь поставить box-shadow на оба элемента, но, конечно, не хочу, чтобы верхний элемент большинства элементов (::after, в данном случае) тень для перекрытия нижнего элемента.

http://codepen.io/trevanhetzel/pen/Gsurk

Кто-нибудь нашел какие-то трюки вокруг этого?

Вот код, кстати

<a class="add"></a> 

.add { 
    position: relative; 
    float: left; 
    padding: 2em; 
    background: green; 
    &::before { 
    content: ""; 
    position: absolute; 
    left: 45%; 
    top: 25%; 
    width: 10%; 
    height: 50%; 
    background: #fff; 
    @include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75)); 
    } 
    &::after { 
    content: ""; 
    position: absolute; 
    left: 25%; 
    top: 45%; 
    width: 50%; 
    height: 10%; 
    background: #fff; 
    @include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75)); 
    } 
} 

, который выдает что-то вроде этого (Sass и компас FTW!): http://t.hetz.co/Rpne

Answer 1

Он имеет плохую поддержку браузера на данный момент, но фильтр: Dropshadow недвижимость могут быть использованы

-webkit-filter: drop-shadow(4px 0px 1px black); 
    -moz-filter: drop-shadow(4px 0px 1px black); 
    filter: drop-shadow(4px 0px 1px black); 

Codepen Example