Псевдоэлемент CSS `::column`

::column — это CSS псевдоэлемент, представляющий отдельные колонки, создаваемые при отображении содержимого контейнера в несколько колонок с помощью многоколоночной раскладки CSS. Псевдоэлемент ::column позволяет применять к этим создаваемым фрагментам стили, не влияющие на раскладку.

Синтаксис

::column {
  /* ... */
}

Описание

Когда для размещения содержимого контейнера в несколько колонок используется многоколоночная раскладка CSS (например, с помощью свойства column-count), создаются псевдоэлементы ::column, содержащие каждую отдельную колонку.

Псевдоэлемент ::column принимает только свойства привязки прокрутки, применимые к элементам внутри контейнера прокрутки, в том числе scroll-margin, scroll-snap-align и scroll-snap-stop.

У псевдоэлемента ::column может быть псевдоэлемент ::scroll-marker. Другие псевдоэлементы, такие как ::before и ::after, для ::column не создаются. Применение ::column::scroll-marker создаёт маркер для каждой колонки исходного контейнера прокрутки, причём псевдоэлементы ::scroll-marker наследуют свойства от исходного элемента псевдоэлемента ::column, а не от самого ::column.

Это полезно для каруселей CSS: ::column можно использовать для создания псевдоэлементов ::scroll-marker для каждой колонки и назначения их целями привязки с помощью привязки прокрутки CSS.

Хотя стилизация, применимая к ::column, очень ограничена, в будущем её возможности могут расшириться. Любые свойства и значения, поддержка которых появится в будущем, будут ограничены теми, что не влияют на раскладку.

Примеры

Прокручиваемая многоколоночная раскладка

В этом примере создаётся адаптивный контейнер, в котором каждая «страница» содержимого фиксируется на месте. Свойство columns и псевдоэлемент ::column используются для создания колонок содержимого, занимающих всю ширину родительского контейнера прокрутки, который можно прокручивать по горизонтали. Каждая колонка содержит один или несколько элементов списка; их количество зависит от ширины области просмотра.

HTML

HTML состоит из маркированного списка, каждый элемент списка которого содержит пример содержимого:

<ul>
...
  <li>
    <h2>Item 1</h2>
  </li>
...
</ul>

<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

CSS

Для списка задаётся фиксированная height и width со значением 100vw, чтобы он занимал всю ширину области просмотра. Затем для горизонтальной прокрутки содержимого задаётся значение scroll свойства overflow-x, а привязка прокрутки CSS используется для фиксации каждого элемента или «страницы»: значение x mandatory свойства scroll-snap-type превращает список в контейнер с привязкой прокрутки. Наконец, задаётся значение 1 свойства columns, чтобы содержимое списка отображалось в одну колонку. Также применяется значение center свойства text-align, выравнивающее содержимое по центру списка.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

Затем стилизуются элементы списка:

• Для свойства display задаётся значение inline-block, чтобы элементы списка располагались рядом друг с другом и список прокручивался по горизонтали.
• Для них задаются фиксированные значения свойств width и height.
• Для них задаётся значение left свойства text-align, переопределяющее значение text-align: center, заданное для родительского контейнера, чтобы содержимое элементов выравнивалось по левому краю.
• Для каждого второго элемента списка задаётся другой цвет фона с помощью :nth-child(), чтобы эффект прокрутки был заметнее.

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;
  text-align: left;

  background-color: #eeeeee;
  outline: 1px solid #dddddd;
  padding: 0 20px;
  margin: 0 10px;
}

li:nth-child(even) {
  background-color: cyan;
}

Для псевдоэлементов ::column — представляющих колонки содержимого, созданные свойством columns, — задаётся свойство scroll-snap-align, чтобы при прокрутке колонка фиксировалась по центру контейнера прокрутки.

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

Результат

Карусель на основе колонок с маркерами прокрутки

Развивая предыдущий пример, мы создадим маркеры прокрутки, позволяющие переходить непосредственно к разным колонкам. Для этого применим к контейнеру свойство scroll-marker-group, а к каждому псевдоэлементу ::column — псевдоэлемент ::scroll-marker. HTML остаётся без изменений.

CSS

Создадим группу маркеров прокрутки с помощью свойства scroll-marker-group, разместив группу после всего содержимого:

ul {
  scroll-marker-group: after;
}

Затем применим стили к псевдоэлементу ::scroll-marker-group, чтобы разместить маркеры прокрутки по центру строки с интервалом 0.4em между ними:

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

Наконец, с помощью псевдоэлемента ::scroll-marker создадим для каждого элемента списка круглый прозрачный маркер с чёрной рамкой, а затем зададим маркеру текущего элемента прокрутки стиль, отличающийся от остальных. Для этого выберем маркер с помощью псевдокласса :target-current:

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

Результат

Попробуйте нажать на маркеры прокрутки, чтобы сразу перейти к нужной странице. Обратите внимание, что текущий маркер выделен, поэтому видно, где вы находитесь в последовательности страниц. Также попробуйте перейти клавишей Tab к группе маркеров прокрутки, а затем использовать клавиши со стрелками для переключения между страницами.

Другие примеры каруселей см. в статье Создание каруселей CSS.

Спецификации

Совместимость с браузерами

См. также

• columns
• ::scroll-marker
• ::scroll-marker-group
• :target-current
• Создание каруселей CSS
• Модуль многоколоночной раскладки CSS
• Модуль переполнения CSS
• Галерея каруселей CSS на chrome.dev (2025)