<!DOCTYPE html>
<style>
    .x::after { display:block; -webkit-column-span:all; column-span:all; background:yellow; content:".........."; }
</style>
<p>Test adding an ::after pseudo element that's a spanner. The DOM node is followed by more content,
    so we need to split the existing column row into two.</p>
<p>There should be three rectangles with identical sizes below. The first and third one
    should be blue with nothing inside. The second one should be yellow with some dots
    inside.</p>
<div style="line-height:100px; background:blue;">
    <br>
    <div style="background:yellow;">..........</div>
    <br>
</div>