CSS: Pseudo-elements :before and :after inheriting width/height from original element

:before and :after pseudo-elements are inline boxes as much as I know. Therefore, using display: block; might help you.

li{
    float:left;
    position:relative;
}
li img{
    float:left;
}
li:before{
    content:" ";
    position:absolute;
    width:100%;
    height:100%
    box-shadow:0 1px 2px rgba(0,0,0,0.4);
}

it seems content:" ": is important along with display: block