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

::details-content

`::details-content` CSS 擬似要素は、`<details>` 要素の展開可能/折りたたみ可能な内容を表します。

アニメーションdetails

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:details-content
131
131
143
18.4
131
18.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • `::details-content` の後の疑似要素の連鎖はサポートされません。 バグ 283446 を参照してください。
注釈 1件
実装メモ
  • `::details-content` の後の疑似要素の連鎖はサポートされません。 バグ 283446 を参照してください。

基本構文

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;
}

ライブデモ

animation with

::details-content animation with demo.

プレビュー全画面表示

style withcontent

::details-content style withcontent demo.

プレビュー全画面表示

initialperiodo-pn

::details-content initialperiodo-pn demo.

プレビュー全画面表示

実務での使いどころ

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

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

  • FAQ セクション

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

注意点

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

アクセシビリティ

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

参考リンク