CSSのdisplay: table;についての質問です

Question

display: table;って具体的にどんな使い方があるんですか？

もし、あるのなら ::before と ::after　につけて活用する方法を教えてください

Comments

[m.ts10806]

display tableとbefore/afterを要件としてどうしようとしているのか不明です。
擬似要素はあくまで「つけられる」もので、「擬似要素につける」のような表現はしないのでは。
いずれにしてもこの質問内容では何をしようとしているのか全く分からないので具体的に記載してください。

Answer 1

display: table; の使い方 - Qiita

display: table; だけ単独で使うことはないです。
子要素に、display: table-cell; や display:table-row; などを指定して、テーブルのようなレイアウトを実現します。

:before と ::after は子要素を持つことがでませんので、活用できることはないと思います。

それ以外でのテーブルレイアウトにしても、現在ではFlexboxやGridでシンプルに実現できますので、ほとんど出番はないでしょう。

Answer 2

現在はdisplay: flex;に置き換えられていると思いますが、
2010年代半ばごろまでは、たとえばグローバルナビなど1行の横並びリストで活用されていました。
floatと違い、子要素の横幅を指定する必要がなかったので楽でした。

↓見た目でいうとこのくらいのころの話です。

---

<table>や`display: table;`は`position: absolute;`との組み合わせが非常に悪く、 Chromeでは動くけどFirefoxでは動かない..、ということがとても多いです。 ::beforeに`position: absolute;`を指定しようとしているならなおさら、 `display: flex;`を使うのが妥当と考えます。