The ::column pseudo-element in CSS represents the individual columns generated by a multi-column layout on a block-level element. It is part of the CSS Multi-column Layout Module and allows developers to target and style content specifically within each column of a multi-column container. This pseudo-element is especially useful when you want to apply visual effects, spacing adjustments, or other styling selectively to each column rather than the entire container.

Unlike pseudo-elements such as ::before or ::after, which generate content before or after an element’s main content, ::column doesn’t create new content. Instead, it represents the existing flow of content within a column, allowing properties like border, background, margin, and padding to be applied individually to each column. Notably, some properties, such as box-shadow, can be visually impactful when applied at the column level because each column is treated as a separate box.

One practical use of ::column is to style the first column differently from the rest. While the pseudo-class :first-child targets elements based on their position in the DOM, ::column works specifically with the columnized content. For example, you can apply a subtle background color to all columns except the first, or add a decorative border between columns for a magazine-like layout:

<div class="multi-column">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque...</p>
  <p>Additional content that flows across multiple columns.</p>
</div>

.multi-column {
  column-count: 3;
  column-gap: 20px;
}

.multi-column::column {
  background-color: #f0f0f0;
  padding: 10px;
  border-left: 1px solid #ccc;
}

.multi-column::column:first-child {
  background-color: #ffffff;
  border-left: none;
}

In this example, the container <div> with class div is split into three columns. The ::column pseudo-element is used to add a background, padding, and a left border to each column. The first column is styled slightly differently to visually distinguish it.

It’s important to note that browser support for ::column is not universal, and some older browsers may not recognize it. Therefore, while ::column offers powerful styling control, it should be used with fallback strategies or progressive enhancement in mind.

If desired, ::column can be combined with other pseudo-classes such as :nth-child to target columns in specific positions for more advanced layouts.