<!DOCTYPE html>
<html>
    <head>
        <title>Spanner as ::before and ::after pseudo elements</title>
        <script>
            function test() {
                document.body.offsetTop; // trigger layout
                document.getElementById('elm').className = "x";
            }
        </script>
        <style>
            .x::before, .x::after { display:block; -webkit-column-span:all; column-span:all; background:yellow; content:".........."; }
        </style>
    </head>
    <body onload="test()">
        <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 id="elm">&nbsp;</span>
            &nbsp;
        </div>
    </body>
</html>