css - Apply Box Shadow on Container Element -

i'm trying make inset pill using pure css:

where 2 color blocks clickable separately.

but can't figure out how apply box shadow containing element. closest got using :after element , positioning on links; covers links, making them un-clickable:

(jsfiddle)

<div class="pill">     <a href="#" class="plus">&#10010;</a>     <a href="#" class="circle">&#10687;</a> </div><!--/.pill-->   .pill {     position: relative;     float: left;     &:after {         content: "";         display: block;         border-radius: 8px;         box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);         position: absolute;         top: 0;         left: 0;         right: 0;         bottom: 0;     }     {         display: block;         padding: 4px 6px;         text-decoration: none;         color: #fff;         float: left;         &.plus {             background: #3c55b1;             border-radius: 8px 0 0 8px;             border-right: 1px solid darken(#3c55b1, 30%);         }         &.circle {             background: #40be84;             border-radius: 0 8px 8px 0;             border-left: 1px solid lighten(#40be84, 15%);         }     } } 

i'm aware of pointer-events property, browser support pretty shabby.

so think? possible?

you not using spread property on box shadow, want create border, instead using box shadow add border each element.

remove the:after property , normal behavior

jsfiddle