title: CSS3 "plus" icon with box-shadow that doesn't overlap
body: <p>I've been playing around with making shapes in CSS. I'm finding that it's all fine and dandy until you want to add a <code>box-shadow</code> or <code>border</code> to your element that was created with both a <code>::before</code> and <code>::after</code> pseudo element.</p>
  
  <p>Here's an example I put together of a plus (+) icon made with two elements. I'm attempting to put a <code>box-shadow</code> on both the elements, but of course don't want the top most element's (<code>::after</code>, in this case) shadow to overlap the bottom element.</p>
  
  <p><a href="http://codepen.io/trevanhetzel/pen/Gsurk" rel="nofollow">http://codepen.io/trevanhetzel/pen/Gsurk</a></p>
  
  <p>Has anyone found any clever tricks around this?</p>
  
  <p>Here's the code, by the way (Sass and Compass FTW!)</p>
  
  <pre><code>&lt;a class="add"&gt;&lt;/a&gt;
  
  .add {
    position: relative;
    float: left;
    padding: 2em;
    background: green;
    &amp;::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));
    }
    &amp;::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));
    }
  }
  </code></pre>
  
  <p>Which outputs something like this: <a href="http://i.stack.imgur.com/T9qte.png" rel="nofollow">http://t.hetz.co/Rpne</a></p>