【CSS】疑似要素を追加しよう！【::before, ::after】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回は疑似要素について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

疑似要素とは

簡単に言うと、HTML上では存在しない擬似的な要素を
CSSから挿入することです。

要素の前に挿入しよう！ ::before

要素の前に擬似要素を挿入するには ::before を使います。

要素名::before{
    content: 挿入するコンテンツ;
}

See the Pen 疑似要素::before by samehack (@samehack) on CodePen.

このように記述することで、h1要素の前に
画像データを挿入することができます。

要素の後に挿入しよう！ ::after

要素の後に擬似要素を挿入するには ::after を使います。

要素名::after{
    content: 挿入するコンテンツ;
}

See the Pen 疑似要素::after by samehack (@samehack) on CodePen.

このように記述することで、h1要素の後に
テキストを挿入することができます。

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram