Triangular pseudo-in front of dropshadow element

Is it possible to add a triangular shadow to a triangular pseudo-in front element?

Here is a fiddle of what I have so far.

<div class="list">
    <a>list item one</a>
    <a class="current">list item two</a>
    <a>list item three</a>
    <a>list item four</a>
</div>


.list a {
        position: relative;
        display: block;
        height: 22px;
        padding: 10px 15px;
        margin-bottom: 20px;
        background-color: #fff;  
        width: 100px;
}

.list a.current {
        background-color: aqua;  
        -moz-box-shadow:    3px 3px 1px 0px #ccc;
        -webkit-box-shadow: 3px 3px 1px 0px #ccc;
        box-shadow:         3px 3px 1px 0px #ccc;
}

.list a.current:before {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 22px solid transparent;
        border-bottom: 22px solid transparent;
        border-left: 10px solid aqua;
        position: absolute;
        top: 50%;
        margin-top: -22px;
        left: 100%;
        z-index: 1;
        -moz-box-shadow:    3px 3px 1px 0px #ccc;
        -webkit-box-shadow: 3px 3px 1px 0px #ccc;
        box-shadow:         3px 3px 1px 0px #ccc;
     }

.list a.current:after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 22px solid transparent;
        border-bottom: 22px solid transparent;
        border-right: 10px solid aqua;
        position: absolute;
        top: 50%;
        margin-top: -22px;
        right: 100%;
        z-index: 1;
     }