::details-content

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

        
          
          <details>  <summary>Подробнее</summary>  <p>Контент, который можно стилизовать через ::details-content.</p></details>
          <details>
  <summary>Подробнее</summary>
  <p>Контент, который можно стилизовать через ::details-content.</p>
</details>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          /* Применяем стили только если поддерживается селектор */@supports selector(::details-content) {  details::details-content {    padding: 12px 16px;    background: #111216;    border-radius: 0 0 12px 12px;    opacity: 0;    transform: translateY(-4px);    transition: opacity .2s ease, transform .2s ease;  }  details[open]::details-content {    opacity: 1;    transform: translateY(0);  }}
          /* Применяем стили только если поддерживается селектор */
@supports selector(::details-content) {
  details::details-content {
    padding: 12px 16px;
    background: #111216;
    border-radius: 0 0 12px 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
  }

  details[open]::details-content {
    opacity: 1;
    transform: translateY(0);
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Синтаксис простой:

        
          
          details::details-content { /* стили */ }
          details::details-content { /* стили */ }

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдоэлемент существует только у <details>. Удобно оборачивать стили в @supports selector(::details-content), чтобы избежать неожиданных эффектов в неподдерживающих браузерах.

Раньше, чтобы отдельно стилизовать «контент без заголовка», приходилось добавлять обёртки в разметку или использовать селекторы по соседям/детям. ::details-content даёт прямую точку стилизации для раскрывающейся части и упрощает анимации появления/исчезновения.

💡 Для плавного появления используйте сочетание opacity и transform; геометрические свойства (height) анимируются хуже.
💡 Добавляйте скругления отдельно для контента (нижние углы), а у <summary> — верхние, чтобы визуально объединить блоки.
💡 Обязательно тестируйте в целевых браузерах; при отсутствии поддержки используйте неблокирующий фоллбек.