CSSの疑似要素とは？beforeとafterの使い方まとめ

記事内に商品プロモーションが含まれる場合があります

今回はCSSの超便利な疑似要素「after」と「before」の使い方をまとめます。初心者の方でも分かるように丁寧に解説していきます。

1. 疑似要素のbeforeとafterとは？

前提として「要素」とは、HTMLの開始タグ・内容・終了タグをひとまとめにしたものです。たとえば<h1>ほにゃらら</h1>は1つの要素です。終了タグがない要素もあります。

CSSの::beforeと::afterは疑似要素です。要素の中に装飾用の内容をCSSで生成できます。大切な文章はHTMLに書き、疑似要素には補助的な装飾を使いましょう。

どのような形でCSSに登場する？

::beforeと::afterは以下のような形でCSSに書かれます。

h1::before {
  content: "内容";
  color: #666;
}
.example::after {
  content: "内容";
  color: #666;
}

タグ名やクラス名、id名などの後に::beforeや::afterをつけるわけですね。content:''内には、挿入したい文字などを書きます。具体的な書き方は後ほど詳しく解説します。

beforeとafterの違いは？

図の「要素の直前/直後」は見た目を簡略化した当時の説明です。実際には::beforeは選んだ要素の最初の子として、::afterは最後の子として生成されます。要素そのものの外側に兄弟要素を挿入するわけではありません。

この図の矢印も表示位置のイメージです。疑似要素はcontentで指定した内容を要素の中に生成します。

たとえば、p要素の内容の先頭、「こんにちは」の前に::beforeで「Hello!」を表示してみます。↓

↑HTMLのp要素には「こんにちは」だけを書いています。CSSの::beforeで、同じ要素の内容の先頭に「Hello!」を表示しています。

疑似要素を使うメリット

疑似要素は、見た目の飾りをHTMLから分けて管理できるのが便利です。ただし生成した文字が検索や読み上げでどう扱われるかは環境によって異なります。読者に必要な文章や見出しの意味はHTMLに書いてください。

1つ例を紹介します。これはサルワカで以前作った「美しい文字のデザインを紹介するページ」のタイトルです。現在そのページは公開されていませんが、当時のデザイン画像を残します。英語の文字を大きく見せ、日本語の見出しを主にした例です。

当時の実装では日本語をh1に置き、英語の文字を疑似要素で足していました。画像はその見た目です。今作るなら、英語も内容として必要かを先に判断し、必要な言葉はHTMLに含めます。疑似要素の文字が検索エンジンに必ず無視されるとは決めつけません。

ちょっとマニアックな話になってしまいました。「何を言っているかよく分からない」という方は理解しなくても全く問題ありません。

疑似要素の対応ブラウザ

::beforeと::afterは現在の主要ブラウザで使えます。続くコロン数の図解は記事公開当時の資料です。いまのコードでは標準の二重コロン記法を使いましょう。

コロン(:)の数はいくつ？

疑似要素には旧来の単一コロン:beforeと、現在の標準的な二重コロン::beforeがあります。この記事の実用コードは二重コロンで統一します。

古いCSSの書き方では単一コロンを使っていました。現在は疑似クラスの:と区別しやすい::を疑似要素に使います。この画像は当時の記法の比較です。

単一コロンの:beforeと:afterも互換のため多くのブラウザで認識されます。新しく書くコードでは::beforeと::afterを使いましょう。

beforeとafterの書き方と活用例

ここからは具体的な書き方と活用例を紹介したいと思います。

文を記号ではさむ

たとえば、class="bracket-example"の要素の前後にカギカッコ『』をつけるように指定してみましょう。

HTMLコード

<p class="bracket-example">これは例文です</p>

CSSコード

.bracket-example::before { content: "『"; color: skyblue; }
.bracket-example::after { content: "』"; color: skyblue; }

ブラウザ表示

↑content:''の中に挿入したい文字列を入れます。文字は水色にしてみました。このように疑似要素は普通の要素と同じようにスタイルの指定ができます。

文の直前にカッコよく英文を入れてみる

HTMLコード

<h1 class="english-title">ここにタイトルを書きます</h1>

CSSコード

.english-title { text-align: center; font-size: 22px; }
.english-title::before { content: "TITLE HERE"; display: block; color: gray; font-size: 2em; }

ブラウザ表示

このように本文の前にかっこよく英文を入れることなんかもできます。display: blockとすると、前後に改行が入るようになります。詳しくは以下の記事が参考になるかと思います。

ちなみに疑似要素の文字列を好きな位置で改行する方法は以下の記事で解説しています。

絶対配置で好きな位置に表示させる

before/afterをposition: absoluteで絶対配置にすることで、自分の好きな位置に配置できるようになります。

この例では見出し自身にposition: relativeを指定し、その::beforeを絶対配置します。top: 0; left: 0なら見出しの左上を基準に置けます。

positionがよく分からないという方は以下の記事を読んでみてください。

実際に書いてみましょう。

HTMLコード

<h1 class="label-heading">こんにちは</h1>

CSSコード

.label-heading { position: relative; padding: 1em; background: silver; font-size: 22px; }
.label-heading::before { content: "ラベル"; position: absolute; top: 0; left: 0; padding: .2em; background: #f89174; color: white; font-size: 14px; }

ブラウザ表示

要素の左上に「ラベル」と書かれた疑似要素が表示されるようになりました。ちなみに絶対配置の場合、beforeをそのままafterに変えても全く同じ表示になります。

アイコンフォントを使う例

アイコンフォントを疑似要素に使うこともできます。Font Awesomeでは、先にKitまたはWebフォントを導入してから専用のフォント指定とUnicodeを使います。下のコードは導入後の書き方です。

.icon-heading::before {
  /* Font AwesomeのWebフォントを導入してから使用 */
  font: var(--fa-font-solid);
  content: "\f00c";
  color: #f89174;
}

古いfont-family: FontAwesomeだけでは現在のFont Awesomeは表示されません。現在のCSS用Webフォントを導入した場合はfont: var(--fa-font-solid)のように指定します。下のライブ見本は依存なしで動くチェック記号を使い、旧アイコンフォントの見本画像も残しています。

この画像は旧Font Awesomeのアイコン番号の確認画面です。現行版で疑似要素を使う場合は、使うスタイルとアイコンのUnicodeを公式手順で確認してください。

使用例

HTMLコード

<h3 class="icon-heading">見出しにアイコンを使おう</h3>

CSSコード

.icon-heading { font-size: 20px; }
.icon-heading::before { content: "✓"; padding-right: 5px; color: #f89174; }

ブラウザ表示

FontAwesomeを使った見出しや箇条書きの表現については、こちらの記事で詳しく解説しています。

引用ボックスを作る

引用符を絶対配置でうまく指定すれば、引用文をそれらしく装飾することができます。

HTMLコード

<blockquote class="quote-example"><p>これは引用の文章です。</p></blockquote>

CSSコード

.quote-example { position: relative; margin: 0; background: #efefef; padding: 20px 10px 15px 40px; }
.quote-example::before { content: "“"; position: absolute; top: 0; left: 10px; color: silver; font: bold 40px Georgia, serif; }

ブラウザ表示

こちらの記事で引用デザインのサンプルをたくさん紹介しています。

手順リストを作る

次に、手順間へ矢印を入れてフローチャート風にする例です。旧見本はFont Awesomeの指差しアイコンでした。下の動く見本は追加フォントなしで表示できる矢印を使います。

HTMLコード

<ol class="flow-example" role="list"><li>最初はこれ</li><li>次にこれ</li><li>最後はこれ</li></ol>

CSSコード

.flow-example { margin: 0; padding: 0; list-style: none; text-align: center; }
.flow-example li { padding: 5px; }
.flow-example li:not(:last-child)::after { content: "↓"; display: block; padding: 5px; color: skyblue; font-size: 2em; line-height: 1; }

ブラウザ表示

この例では最後以外のliの::afterに矢印を表示します。li:not(:last-child)は最後の項目を除く指定です。手順の文章そのものはHTMLのliに残します。セレクタの詳しい説明はこちらも参照してください。

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

content: url(...)で疑似要素に画像を表示できます。ここでは大きさを調整しやすいよう、空のcontentを作り、background-imageに保存済みの画像を指定します。

HTMLコード

<a class="image-link" href="/">サルワカのリンクはこちら</a>

CSSコード

.image-link { display: inline-block; color: #3376a0; }
.image-link::before { content: ""; display: block; width: 64px; height: 64px; background-image: url("https://saruwakakun.com/wp-content/uploads/2017/09/saruwakakun-min.png"); background-position: center; background-size: contain; background-repeat: no-repeat; }

ブラウザ表示

content: url(...)で置いた画像は、通常のwidthだけでは元画像を縮小できません。下の例ではbackground-sizeで寸法を調整します。別の方法は次の記事も参照してください。

ふきだしを作る

ボックスの前後に三角形の疑似要素をつけることで、ふきだしを作ることもできます。

HTMLコード

<p class="bubble-example">コメントを入れます</p>

CSSコード

.bubble-example { box-sizing: border-box; position: relative; width: min(300px, 100%); padding: 20px; margin: 0 0 30px; border-radius: 10px; background: #efefef; }
.bubble-example::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-top: 20px solid #efefef; border-right: 20px solid transparent; border-left: 20px solid transparent; }

ブラウザ表示

contentは空でもOK！

上の例ではcontent: ""にしています。文字を置かず三角形の飾りだけを作る場合にも、疑似要素を生成するためのcontentが必要です。大切な文章はHTMLに残しましょう。

最後に

ここまでbeforeとafterの使い方と活用例を紹介してきました。この他にも本当にたくさんの表現ができるので、気になる方は是非ググってみてください