Hi all

I hava a demo here - http://www.ttmt.org.uk/shadow/

I have a div with a border, I'm using :after to place an image of a shadow after the div.

Is it possible to put this image under the div using z-index so I can slightly move the image up like

http://www.ttmt.org.uk/shadow/1.png


Code:
  <!DOCTYPE html>
  <html lang="en">
    <meta charset="UTF-8">

    <!--css-->

    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      #box{
        position:relative;
        margin:100px;
        width:310px;
        height:350px;
        border-radius:5px;
        border:2px solid #aaa;
        z-index:1;
      }
      #box:after{
        content:url(shadow-left.png) 0 0 no-repeat;
        position:absolute;
        bottom:-46px;
        left:0;
        z-index:-1;

      }
    </style>


    <title>Title of the document</title>
    </head>

  <body>

    <div id="box">

    </div>  

  </body>

  </html>