CSS Page Stacks

CSS page stacks using pseudo elements and no extra html.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="stack">
    Some content in here. Will stretch full width.
</div>

CSS

.stack {
    display:block;
    padding:10px 15px;
    border:1px solid #ddd;
    margin-bottom:20px;
    position:relative;
    border-size:border-box;
    box-shadow:0 18px 10px -14px rgba(0,0,0,0.1);
    background:#fff;
}

.stack:before,
.stack:after {
    content:'';
    display:block;
    border:1px solid #ddd;
    width:98%;
    height:1px;
    position:absolute;
    bottom:-3px;
    border-size:border-box;
    background:#fff;
    left:50%;
    transform:translateX(-50%);
}

.stack:after {
    width:96%;
    bottom:-5px;
}