:after und :before und der z-index

HTML

<div id="target">
    <div>Text to appear in front</div>
</div>

CSS

#target {
    position: absolute;
    background: red;
    width: 200px;
    height: 200px;
    padding: 45px;
}

#target:before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 110%;
    height: 100%;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    z-index: -1;
}