CSSの疑似要素とは？表現の幅を広げる::beforeと::afterの使い方

この記事では、HTMLコードを汚すことなくCSSで要素を装飾できる疑似要素::beforeと::afterを紹介します。これらを使うことで、表現できる幅が飛躍的に広がるので、是非使ってみてください。

疑似要素とは

CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

擬似要素 – CSS: カスケーディングスタイルシート | MDN

ちょっとわかりづらいですが、わざわざHTMLにタグを追加しなくても、いくつかの要素にはCSSでスタイリングする方法があらかじめ用意されているという事です。HTMLをきれいに保ったまま装飾ができるんですね。

::beforeと::afterについて

さて、そんな疑似要素の中でも代表的な::beforeと::afterは、要素の直前と直後に装飾などを付け加えることができます。

文字を前後に入れてみる

実際にやってみます。HTMLはシンプルにpタグのみ。HTMLの::before、::afterで指定した要素のcontentプロパティに文字列を入れるとそれぞれ反映されます。文字列を入れる場合はシングルクォーテーション「’」もしくはダブルクォーテーション「”」で囲む必要があります。

<p>こんにちは。</p>

/* 要素の直前に対して新たな要素を追加する場合 */
p::before {
  content: 'どうも';
  color: red;
}

/* 要素の直後に対して新たな要素を追加する場合 */
p::after {
  content: 'Studio113です。';
  color: blue;
}

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

contentプロパティに入力した文字列がpタグ要素の前後に追加されました。

画像を入れてみる

次に画像を表示させてみます。HTMLは同じくpタグのみ。contentプロパティには使用する画像のURLを指定します。こちらは文字列のようにシングルクォーテーション「’」もしくはダブルクォーテーション「”」で囲む必要はありません。

<p>こんにちは。</p>

p::before {
  content: url(img/logo.png);
}

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

画像が表示されました。指定もシンプルで直感的だと思います。が、contentプロパティで追加した画像はサイズを変更することができません。その為、使用する画像はあらかじめ画像編集ソフトなどでサイズを調整する必要があります。

画像のサイズを調整したい場合はbackgroundプロパティを使う

::beforeや::afterで追加した画像のサイズを変更したい。そんな時はbackgroundプロパティを使いましょう。contentプロパティの中身を空にして、backgroundプロパティに使用する画像のURLを指定します。

<p>こんにちは。</p>

p::before {
  content: ''; /* 要素を空白にする */
  display: inline-block; /* ブロック要素に変更 */
  width: 100px; /* 幅 */
  height: 30px; /* 高さ */
  margin-right: 5px; /* ロゴとタイトルの間にスペースを追加 */
  background: url(img/logo.png) no-repeat;
  background-size: 100%; /* 背景画像のサイズ */
  vertical-align: middle; /* 上下中央揃え */
}

See the Pen 疑似要素の例3 by yusuke1110 (@yusuke1110) on CodePen.

画像のサイズを変更することができました。

ポイントとしては、疑似要素はインライン要素なので幅や高さを指定する場合はブロック要素に変更する必要があります。画像がうまく表示されない場合は、displayプロパティの指定を見直してみてください。

::afterと::beforeの活用例

基本的な::beforeと::afterの使い方がわかったところで、実際の活用例をいくつか紹介します。

リストの装飾

疑似要素を使うとリストの装飾が簡単にできます。今回は順序なしリストを装飾してみます。

<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>

li {
  list-style: none;
  position: relative; /* 親要素 */
  padding-left: 1.2em;
}

li::before {
  content: '★';
  position: absolute; /* 子要素 */
  top: 0;
  left: 0;
  color: yellowgreen; /* 黒丸の色を指定 */
}

See the Pen 疑似要素の例4 by yusuke1110 (@yusuke1110) on CodePen.

リスト自体にcolorを指定するとリスト全体に適用されてしまいますが、::beforeを使うことで文字の色はそのままリストマークのみを自由に装飾することができます。

※指定できるプロパティの数は少ないですが、リストマークの箇所のみを指定する::markerという疑似要素もあります。

アイコンフォントで外部リンクにアイコンをつける

アイコンフォントを利用して外部リンクにアイコンをつけます。ユーザビリティの観点からも、自サイト内から出る時は、外部リンクという事をわかりやすく表示しましょう。

今回はFontAwesomeを使用しますが、どのアイコンフォントでも手順は同じです。

<a href="https://www.google.com/" target="_blank">Google</a>

a::after {
  margin-left: 0.2em;
  content: '\f35d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: yellowgreen;
}

See the Pen 疑似要素の例5 by yusuke1110 (@yusuke1110) on CodePen.

FontAwesomeの使い方については別途記事にまとめたいと思います。

吹き出しを作る

吹き出しも疑似要素を使うことで簡単に表現することができます。

<p class="fukidashi">フキダシです</p>

.fukidashi {
  display: inline-block;
  position: relative;
  padding: 10px;
  background: yellowgreen;
  border-radius: 4px;
}

.fukidashi::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 10px;
  border-right: 8px solid transparent;
  border-top: 8px solid yellowgreen;
  border-left: 8px solid transparent;
}

See the Pen 疑似要素の例6 by yusuke1110 (@yusuke1110) on CodePen.

これにアレンジを加えていろんなデザインの吹き出しを作ってみてください。

floatを解除する（clearfix）

floatの解除に使用するというちょっと変わった使い方もできます。単なる横並びであればflexboxを使えば良いですが、本来の回り込みをさせる場面ではfloatを使う機会はあります。そんな時のために、これをユーティリティクラスとして用意しておくと便利です。

<div class="clearfix">
  <img src="https://placehold.jp/150x150.png" class="float-left">
  <p>このテキストはダミーです。文字のサイズ、間隔、色などを確認するためのに挿入したダミーの文章です。このテキストはダミーです。文字のサイズ、間隔、色などを確認するためのに挿入したダミーの文章です。</p>
</div>

<div>
  <img src="https://placehold.jp/150x150.png" class="float-left">
  <p class="float-right">このテキストはダミーです。文字のサイズ、間隔、色などを確認するためのに挿入したダミーの文章です。このテキストはダミーです。文字のサイズ、間隔、色などを確認するためのに挿入したダミーの文章です。</p>
</div>

.float-left {
  float: left;
}

.clearfix::after {
  content: ''; /* 要素を空白にする */
  display: block; /* ブロック要素にする */
  clear: both; /* 要素の回りこみを解除 */
}

See the Pen 疑似要素の例7 by yusuke1110 (@yusuke1110) on CodePen.

まとめ

今回は疑似要素の中でも一番使用頻度の高い::beforeと::afterについて説明しました。ここで紹介した以外にもまだまだいろんなことに活用することができるので、皆さんもぜひ試してみてください。