Псевдоэлемент CSS `::details-content`

::details-content — это CSS-псевдоэлемент, который представляет раскрываемое и сворачиваемое содержимое элемента <details>.

Попробуйте

details[open]::details-content {
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
}

<details open>
  <summary>Example summary</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>
    Architecto cupiditate ea optio modi quas sequi, esse libero asperiores
    debitis eveniet commodi hic ad.
  </p>
</details>

Синтаксис

selector::details-content

Примеры

Базовый пример

В этом примере показано базовое использование псевдоэлемента ::details-content для стилизации содержимого элемента <details>.

HTML

Наш элемент <details> содержит элемент <summary>, содержимое которого всегда будет видно. Содержимое details включает элемент <p>.

<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
</details>

CSS

Мы задаём background-color для псевдоэлемента ::details-content:

details::details-content {
  background-color: #a29bfe;
}

Результат

Нажмите на сводку, чтобы просмотреть подробное содержимое.

Пример с переходом

В этом примере псевдоэлемент ::details-content используется для задания перехода для содержимого элемента <details>, чтобы оно плавно появлялось при раскрытии и плавно исчезало при сворачивании.

HTML

HTML-код такой же, как в предыдущем примере.

<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
</details>

CSS

Чтобы создать переход, мы указываем два отдельных перехода в сокращённом свойстве transition:

• Для свойства opacity задаётся обычный переход длительностью 600ms, создающий эффект плавного появления и исчезновения.
• Для свойства content-visibility (которое переключается между hidden и visible при раскрытии и сворачивании содержимого <details>) задаётся переход 600ms со значением transition-behavior allow-discrete. Это позволяет браузеру запускать переход для content-visibility, поведение анимации которого является дискретным. В результате содержимое остаётся видимым на протяжении всего перехода, благодаря чему видны другие переходы. Если бы этот переход не был включён, содержимое сразу исчезало бы при сворачивании содержимого <details> — плавного исчезновения не было бы видно.

details::details-content {
  opacity: 0;
  transition:
    opacity 600ms,
    content-visibility 600ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
}

Результат

Чтобы увидеть анимацию, переключайте видимость подробного содержимого, нажимая на сводку.

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

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

См. также

• <details>
• <summary>