v135 · css / layout

Column Styler

Live configure ::column pseudo-element styles for a multi-column text layout. Change background colour, border, padding, and column count — the pseudo-element styles each column fragment post-layout without affecting text flow.

checking ::column support…
The ::column pseudo-element (Chrome 135) applies visual styles to the generated column boxes in a multi-column layout. Only post-layout properties are allowed (background, border, padding, box-shadow) — the pseudo-element cannot affect text reflow. It is the CSS-native way to give columns distinct visual treatment without wrapper elements.

Column settings

Multi-column layout

Typography has long been the backbone of good design. Multi-column layouts bring the printed newspaper and magazine tradition to the web, creating a sense of depth and organisation that single-column text cannot achieve. The challenge has always been styling the individual columns without resorting to wrapping each in an extra element. The ::column pseudo-element solves this elegantly by targeting the generated column box directly in CSS. This text is long enough to flow across all configured columns. Add more and more interesting content to see how the layout responds. The browser handles all the fragmentation automatically, and the pseudo-element styles follow each fragment post-layout.

Generated CSS

see also