Newly available 条件付きYES。Baseline Newly available。アコーディオンUIのアニメーション実装に有効。非対応ブラウザでもアニメーションなしで動作する。
セレクター Newly available

::details-content

::details-content は <details> 要素の展開・折りたたみコンテンツ部分を選択する擬似要素。これにより、アコーディオンの開閉アニメーションをCSS単体で実装でき、高さの自動計算（height: auto へのトランジション）も可能になる。

アニメーションdetails

概要

::details-content は <details> 要素の展開・折りたたみコンテンツ部分を選択する擬似要素。これにより、アコーディオンの開閉アニメーションをCSS単体で実装でき、高さの自動計算（height: auto へのトランジション）も可能になる。

対応ブラウザ

デスクトップ

Chrome 131+
Edge 131+
Safari 18.4+
Firefox 143+

モバイル

Chrome Android 131+
Safari iOS 18.4+
Firefox Android 143+

基本構文

CSS 
details::details-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

details[open]::details-content {
  height: auto;
}

実務での使いどころ

  • アコーディオンの開閉アニメーション

    details/summary を使ったアコーディオンにスムーズな開閉アニメーションを追加。JS不要。

  • FAQ セクション

    FAQの回答部分にフェードインアニメーションを適用。

注意点

  • 比較的新しい機能のため、対応ブラウザの確認が必要。
  • 非対応ブラウザではアニメーションなしの即時表示になる（機能自体は動作する）。

アクセシビリティ

  • details/summary のネイティブなアクセシビリティを損なわないよう、display: none を直接操作しない。

参考リンク