CSSの疑似要素まとめ

ついつい、書き方を忘れてしまうCSSの疑似要素のメモです。

::before

HTML要素の「前」にコンテンツ挿入（前だからbefore）

See the Pen
Untitled by momonga (@momonga2023)
on CodePen.

::after

HTML要素の「後ろ」にコンテンツ挿入（後だからafter）

See the Pen
Untitled by momonga (@momonga2023)
on CodePen.

要素の下に短い下線で装飾する場合はこちら

See the Pen
疑似要：素見出しの下に短い下線 by momonga (@momonga2023)
on CodePen.

::marker

リストにマーカーをつけます。

See the Pen
疑似要素::marker by momonga (@momonga2023)
on CodePen.

::selection

文章の一部をドラッグして選択すると、指定の色に変わります。

See the Pen
Untitled by momonga (@momonga2023)
on CodePen.

::first-letter

See the Pen
疑似要素::first-letter by momonga (@momonga2023)
on CodePen.

::first-line

See the Pen
疑似要素::first-line by momonga (@momonga2023)
on CodePen.

:？　か　 ::？　か

CSS3では、::after ::before コロンを2つ付けます。
CSS2で導入された:afterも、多くのブラウザで使えます。

参照サイト：
https://blog.maromaro.co.jp/archives/4090
https://webtan.impress.co.jp/e/2015/12/08/21670