CSS ::column Pseudo-Element

The ::column pseudo-element represents individual column boxes generated by CSS multi-column layout. It allows developers to target these columns for certain visual effects and scroll-related features without adding separate HTML elements for each column. The feature is experimental and has limited browser availability.

Syntax

selector::column {
  scroll-snap-align: center;
}

The selector identifies an element that uses CSS multi-column layout.

The ::column pseudo-element targets the column boxes generated by that element.

The scroll-snap-align property controls how each column aligns with a scroll container's snap position.

For example:

.column-container::column {
  scroll-snap-align: start;
}

This rule makes each generated column a potential scroll snap target in supporting browsers.

Important: The ::column pseudo-element does not support every CSS property that can be applied to an ordinary HTML element. Its primary defined use is with scroll snapping and related pseudo-elements.

How It Works

CSS multi-column layout divides the content of an element into multiple columns.

The browser creates column boxes to arrange the content according to properties such as column-count, column-width, and column-gap.

These column boxes are generated by the layout system and do not correspond to separate HTML elements.

The ::column pseudo-element provides a way to target the generated column boxes directly.

For example:

.article-columns {
  columns: 3;
  column-gap: 20px;
}
.article-columns::column {
  scroll-snap-align: start;
}

The columns: 3 declaration requests three columns.

The column-gap property defines the spacing between adjacent columns.

The ::column rule identifies each generated column as a scroll snap target when the appropriate scrolling behavior is configured.

The pseudo-element does not create additional columns or change the HTML structure.

CSS Multi-Column Layout

CSS multi-column layout allows content to flow automatically from one column to another.

It is commonly used for text-heavy layouts, including articles, documentation, and magazine-style content.

The following CSS creates a three-column layout:

.article {
  column-count: 3;
  column-gap: 24px;
}

The browser divides the content into three columns and places a 24-pixel gap between them.

Alternatively, the column-width property can specify a preferred column width.

.article {
  column-width: 220px;
  column-gap: 24px;
}

The browser determines how many columns fit within the available space.

The ::column pseudo-element works with the column boxes generated by these layout properties.

It does not replace the properties used to establish the multi-column layout.

Understanding Column Boxes

A column box is a layout fragment created when content is divided into columns.

For example, a paragraph may begin in one column and continue in another.

The browser manages this fragmentation automatically.

The ::column pseudo-element represents the generated column boxes rather than the original paragraph or other HTML elements.

This distinction is important because a single HTML element can contribute content to multiple columns.

The pseudo-element allows supported CSS features to operate on the column boxes themselves.

For example, scroll snapping can align a generated column with the visible area of a horizontally scrolling container.

The number and arrangement of column boxes can change when the container's size, content, or multi-column properties change.

Styling Individual Columns

The ::column pseudo-element has a restricted set of supported CSS properties.

Unlike ordinary HTML elements, column boxes cannot generally be styled with arbitrary backgrounds, borders, padding, or margins through this pseudo-element.

Its most important supported styling capability is scroll snap alignment.

.scrolling-columns::column {
  scroll-snap-align: center;
}

The scroll-snap-align: center declaration requests that each column align with the center of the scroll container's snapport.

Other alignment values include:

none - Does not define a snap position for the column.
start - Aligns the column's start edge with the corresponding snap position.
center - Aligns the column's center with the snap position.
end - Aligns the column's end edge with the corresponding snap position.

The scroll container must also use an appropriate scroll-snap-type declaration for snapping to take effect.

Note: Applying properties such as background-color or border directly to ::column should not be relied upon. Use the multi-column container or its actual child elements for ordinary visual styling.

Example

The following example creates a horizontally scrolling multi-column layout with scroll snapping applied to its generated columns.

HTML:

<div class="column-scroll">
  <h3>CSS Layout Basics</h3>
  <p>CSS provides several methods for arranging content on a webpage. Each layout method serves different purposes and offers different controls.</p>
  <p>Normal document flow determines how block and inline elements appear when no special layout rules are applied.</p>
  <p>Flexbox arranges elements along a primary axis and is useful for navigation, alignment, and flexible interface components.</p>
  <p>CSS Grid provides two-dimensional layout capabilities for organizing content into rows and columns.</p>
  <p>Multi-column layout divides continuous content into columns, allowing text to flow automatically between them.</p>
  <p>Responsive design adapts layouts to different screen sizes using flexible dimensions and media queries.</p>
</div>

CSS:

.column-scroll {
  width: 100%;
  height: 240px;
  overflow-x: auto;
  overflow-y: hidden;
  columns: 220px;
  column-gap: 20px;
  column-fill: auto;
  scroll-snap-type: x mandatory;
  padding: 15px;
  border: 1px solid #ccc;
}
.column-scroll::column {
  scroll-snap-align: start;
}
.column-scroll h3 {
  margin-top: 0;
}
.column-scroll p {
  margin-bottom: 12px;
}

The container has a fixed height and uses horizontal scrolling when its columns extend beyond the visible width.

The columns: 220px declaration requests columns with a preferred width of 220 pixels.

The column-fill: auto declaration fills columns sequentially rather than balancing their content equally.

The scroll-snap-type: x mandatory declaration enables horizontal scroll snapping.

The ::column rule establishes a snap position at the start of each generated column.

In supporting browsers, scrolling can settle at the beginning of a column instead of stopping at an arbitrary horizontal position.

Note: The example uses an experimental pseudo-element. Browsers that do not support ::column can still display and scroll the multi-column content, but the column-based snap positions may not be available.

Using Scroll Snapping

CSS scroll snapping allows a scroll container to align content with defined positions after a scrolling interaction.

For multi-column layouts, the ::column pseudo-element provides a way to define snap positions for generated columns.

Two properties work together:

scroll-snap-type - Defines the scrolling axis and snapping behavior on the scroll container.
scroll-snap-align - Defines the alignment position of each snap target.

For example:

.columns {
  height: 250px;
  columns: 240px;
  column-fill: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.columns::column {
  scroll-snap-align: start;
}

The container enables mandatory horizontal snapping.

Each generated column provides a snap target at its start edge.

This approach can be useful for horizontally scrolling articles or document previews.

For a less restrictive scrolling experience, use scroll-snap-type: x proximity.

.columns {
  scroll-snap-type: x proximity;
}

With proximity snapping, the browser generally snaps when the scroll position is close to a defined snap point.

Because ::column is experimental, test the behavior in browsers that support it.

Columns and Scroll Markers

The ::column pseudo-element can be combined with the ::scroll-marker pseudo-element in supporting browsers.

Scroll markers provide navigation controls associated with scrollable content.

For example:

.columns {
  scroll-marker-group: after;
}
.columns::column::scroll-marker {
  content: "";
}

The scroll-marker-group: after declaration requests a scroll marker group after the scroll container.

The ::column::scroll-marker selector creates markers associated with generated column boxes in implementations that support this feature.

The markers can be styled separately from the original content.

This allows a multi-column scrolling interface to provide navigation between its generated columns without adding a separate HTML navigation element for each column.

Both ::column and column-based scroll markers are newer CSS features and should be tested for browser compatibility.

::column vs. column-rule

The ::column pseudo-element should not be confused with the column-rule property.

::column Pseudo-Element

Targets generated column boxes.
Supports certain scroll-related styling features.
Can establish scroll snap positions for individual columns.
Has limited browser availability.

column-rule Property

Draws a decorative line between columns.
Controls the line's width, style, and color.
Does not target individual column boxes.
Is widely supported in modern browsers.

For example:

.article {
  columns: 3;
  column-gap: 24px;
  column-rule: 1px solid #ccc;
}

This rule creates three columns separated by thin gray lines.

It does not require the ::column pseudo-element.

Use column-rule for visual separators and ::column for supported column-specific features such as scroll snapping.

Limitations

The ::column pseudo-element has several important limitations.

It applies to column boxes generated by CSS multi-column layout.
It does not create columns or control the number of columns.
It supports only a restricted set of CSS properties.
It cannot be used as a general-purpose selector for styling each column's background, border, or padding.
It does not create separate HTML elements for individual columns.
Its behavior depends on browser support for the relevant CSS specifications.
Column dimensions and positions can change when the layout or content changes.

For example, the following rule should not be relied upon to create colored column backgrounds:

.article::column {
  background-color: #e6f0ff;
}

Background styling is not a generally supported capability of ::column.

For ordinary multi-column appearance, style the container and its content using established CSS properties.

Accessibility Considerations

The ::column pseudo-element changes how generated columns participate in supported CSS features, but it does not change the semantic structure of the HTML document.

When creating scrollable multi-column layouts, follow these accessibility practices:

Preserve a logical reading order in the HTML source.
Ensure that all content remains accessible when scroll snapping is unsupported.
Avoid mandatory snapping configurations that make portions of content difficult to reach.
Provide sufficient space for text resizing and browser zoom.
Make scrolling controls discoverable and usable with keyboard and pointer input.
Test the layout at different viewport sizes.
Do not rely on visual column position to communicate essential information.

Multi-column layout can change the visual arrangement of content, but the underlying HTML should remain meaningful when CSS is disabled.

For interactive scrolling interfaces, verify that users can reach all content and that focus movement remains understandable.

Browser Support

The ::column pseudo-element is an experimental CSS feature with limited browser availability.

It is associated with newer CSS capabilities for generated column boxes, scroll snapping, and scroll markers.

Support for CSS multi-column layout does not automatically mean that a browser supports the ::column pseudo-element.

Browsers that do not recognize the selector ignore rules that depend on it.

The underlying multi-column layout can continue to function using established properties such as columns, column-gap, and column-rule.

For current compatibility information, visit Can I Use? and search for CSS multi-column layout and CSS scroll snapping. These feature results do not establish support for ::column itself.

Consult the MDN reference for ::column for more specific implementation information.

Specifications

The ::column pseudo-element is defined in the CSS Multi-column Layout Module Level 2 draft.

Its scroll snapping behavior is related to the CSS Scroll Snap Module Level 1 .

These specifications describe generated column boxes and how scroll snapping can interact with scrollable layouts.