メニュー

CSSの擬似要素::beforeと::afterでできることと使い方

HTML
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

CSSの::beforeと::afterの使い方がよくわかりません

先生

::beforeと::afterでできることを説明します

この記事でわかること
  • 擬似要素::beforeと::afterでできること
  • ::beforeと::afterの書き方
目次

::beforeと::afterについて

::beforeと::afterはCSSの疑似要素で以下のように記述します。

See the Pen ::before::after by mik20621 (@mik20621) on CodePen.

疑似要素について

疑似要素は、HTMLの要素に追加する形でCSSに書く要素です。

HTMLには何も記述しない

疑似要素はCSSに記述して、HTMLには何も記述しません。

HTMLの内容に影響を与えずに、装飾を追加できるメリットがあります。

CSSのセレクタに付加する

疑似要素はHTMLの要素に追加するので、単体で書くのではなくCSSセレクタに付加する形で書きます。

/* セレクタの後に付加する */
p::before {
  content: "◆";
}

beforeとafterの書き方

::beforeと::afterも他の要素と同様に、widthやborderなどのCSSのプロパティを設定できます。

See the Pen ::before::after by mik20621 (@mik20621) on CodePen.

重なり順（z-index）

::beforeと::afterは親要素の前面に表示されます。

See the Pen ::before::after-content4 by mik20621 (@mik20621) on CodePen.

この重なり順を変えるには、z-indexプロパティを設定します。

z-indexは、positionがデフォルトのstatic以外でないと効かないです。

See the Pen ::before::after-content6 by mik20621 (@mik20621) on CodePen.

中身が無い場合 content: ""; を設定する

::beforeや::afterの内容が何も無いとwidthやheightを設定してもサイズが0になって画面に何も表示されません。

それを避けるには、背景色や枠線だけを表示したい場合、content: "";を設定するします。

See the Pen ::before::after3 by mik20621 (@mik20621) on CodePen.

::beforeと::afterの使い方

contentプロパティ

::beforeや::afterでは、設定した値で内容を置き換えるcontentプロパティをよく使います。

contentプロパティを使って、いろいろな内容を表示できます。

文字を表示する

contentプロパティに文字を設定すると、その文字が表示されます。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

画像を表示する

contentプロパティに画像を指定

contentプロパティに画像ファイルのパスを設定すると画像を表示できます。

この場合、画像は元のサイズで表示されて、サイズを指定できません。

See the Pen ::before::after-content2 by mik20621 (@mik20621) on CodePen.

backgroundプロパティに画像を指定

backgroundプロパティで画像ファイルを背景に設定する方法でも画像を表示できます。

この場合、displayでblockやinline-blockを指定して、表示サイズを設定することができます。

背景画像も内容が無いと表示されないので、中身にタグが無い場合はcontent: "";を指定します。

See the Pen ::before::after-content2 by mik20621 (@mik20621) on CodePen.

Font AwesomeのWEBフォントを表示する

::beforeや::afterにも、Font Awesomeのアイコンを表示できます。

あわせて読みたい
Font Awesome The internet’s icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
Font Awesomeの利用方法

ここでは、簡単に利用できる以下のサイトのCDNを利用します。

cdnjs
font-awesome – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for dev… The iconic SVG, font, and CSS toolkit – Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5…

CDNのリンクの一番上の行の、真ん中のアイコンをクリックするとFont AwesomeのCSSのlinkタグがクリップボードにコピーされます。

コピーしたlinkタグを、headタグ内に貼り付けます。

これで、このWEBページでFont Awesomeのアイコンを使用できます。

Font Awesomeの書き方

Font Awesomeを::beforeや::afterで使うには、contentやfont-familyを以下のように指定します。

Font Awesome 6の場合

セレクタ::before {
  font-family: "Font Awesome 6 Free";  /* Font Awesome 6 無料版のフォント名 */
  content: '\????';  /* ????はFont AwesomeのアイコンのUnicodeを書く */
  font: var(--fa-font-solid);
}

Font Awesome 5の場合

セレクタ::before {
  font-family: "Font Awesome 5 Free";  /* Font Awesome 5 無料版のフォント名 */
  content: '\????'; /* ????はFont AwesomeのアイコンのUnicodeを書く */
  font-weight: 900; /* これを書かないとアイコンが表示されない */
}

TwitterなどBrandsのアイコンの場合は、書く内容が少し異なります。

See the Pen ::before::after-content7 by mik20621 (@mik20621) on CodePen.

contentに書くUnicodeについて

contentに\(バックスラッシュ)の後に続けるUnicodeは以下の場所で確認します。

Font Awesomeのサイト上部にあるIconsのリンクをクリックします。

使用するアイコンを選択して、上部のUnicodeをクリックするとクリップボードにコピーされます。

::beforeと::afterの使い所

要素を前後で挟む

要素の前後に::beforeと::afterの疑似要素を表示して挟みます。

See the Pen ::before::after4 by mik20621 (@mik20621) on CodePen.

先頭にアイコンや画像を表示

::beforeや::afterで要素の先頭にアイコン画像などを表示します。

See the Pen ::before::after-content7 by mik20621 (@mik20621) on CodePen.

ふきだしを表示

::beforeや::afterで三角形を描いて、位置を調整することでふきだしを表現できます。

See the Pen bubble-clip by mik20621 (@mik20621) on CodePen.

矢印を表示

::beforeや::afterで枠線を描いて、角度を変えると矢印を描けます。

See the Pen ::before::after-content9 by mik20621 (@mik20621) on CodePen.

フロー図を表示

リスト要素の間に::beforeや::afterで図形や画像を表示して、フロー図を表示する。

See the Pen ::before::after-content10 by mik20621 (@mik20621) on CodePen.

背景を重ねる

::beforeや::afterに背景を設定することで、重ね合った背景を表示できます。

See the Pen ::before::after-flow by mik20621 (@mik20621) on CodePen.

HTML
よかったらシェアしてね！
  • URLをコピーしました！
目次