【CSS】初心者必見!CSSの疑似要素とは?beforeとafterを使う方法!【コピペ可】

2021.11.04

CATEGORY : WEB

こんにちは缶コーラです。

今回はcssをもっと使いこなす為に『疑似要素』の::beforeと::afterについて解説していきたいと思います。

疑似要素とは?

疑似要素とはCSSで作られた疑似的な要素のことです。
つまり、HTMLで書かれていないのに表示上はあたかも要素があるかのようにできる方法です。

HTMLで書いていないということですので、検索エンジンはこのCSSで疑似的に作られた要素をコンテンツの中身としては見ていないので、インデックスされる可能性が低いです。

また、::beforeや::afterなどの疑似要素のcontentプロパティで表示した文字列は選択ができないなどの特徴もあります。

beforeとafterの違いとは?

beforeは要素の直前にコンテンツが追加できます。
afterは要素の直後にコンテンツが追加できます。

HTML

CSS

See the Pen
Untitled
by テラソリューション/テラソル (@terasolution)
on CodePen.

HTML上は「大きな見出し」をh1タグで囲んでるだけですが、疑似要素のbeforeとafterで装飾された文字が挿入されています。

挿入する内容は疑似要素の『content』プロパティで指定できます。文字列・引用符・カウンタ・画像・音声など様々なものを挿入することができます。

疑似要素に画像を表示する

contentプロパティにurl(画像のパス)を書くと、疑似要素に画像を表示することができます。

HTML

CSS

結果

ラーメンが大好き

要素の直前と直後に画像が表示されましたが、サイズが少し大きいです・・・。
そんな時はwidthheightで調節したくなると思いますが、残念ながらこのcontentプロパティで表示した画像はwidthとheightでは変更することができません。
画像サイズを変更する方法はまた別の記事で紹介したいと思います。

アイコンフォント(fontawesome)を表示

良く使うものと言ったら疑似要素でアイコンフォントを表示する事でしょう。アイコンフォントの代表的なものであるFontAwesomeを使ってみます。
例えば、リストスタイルにアイコンを付けるなら

HTML

CSS

結果

  • リストAAA
  • リストBBB
  • リストCCC

あとこれも良く使いますが、リンクにアイコンを付ける場合は

HTML

CSS

結果

詳しくはこちら

吹き出しを表示する

最後にこのサイトの見出しでも使っているますが、疑似要素で吹き出しを作ってみます。

HTML

CSS

結果

吹き出しコメント

まとめ

いかがでしたか、疑似要素を使いこなせるようになると様々な表現ができるようになり、コーディングの幅がぐんと広がりますので、身に着けておくと良いでしょう。

へばっ!!

Pocket