<!DOCTYPE html>
<html>
    <head>
        <title>Spanner as ::before and ::after pseudo elements</title>
        <style>
            .x::before, .x::after { display:block; -webkit-column-span:all; column-span:all; background:yellow; content:".........."; }
        </style>
    </head>
    <body>
        <p>There should be five rectangles with identical sizes below. The first, third and fifth
        one should be blue with nothing inside. The second and fourth one should be yellow with some
        dots inside.</p>
        <div style="-webkit-columns:4; columns:4; orphans:1; widows:1; line-height:100px; background:blue;">
            &nbsp;
            <span class="x">&nbsp;</span>
            &nbsp;
        </div>
    </body>
</html>