CSSの疑似要素まとめ

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

コメント