CSSの疑似要素とは? beforeとafterの設定方法・使い方を知ろう

今回のお題

クライアント

大見出しのところが寂しいから、装飾が欲しいんですよね。図のようにツートンカラーの線が引いてあったらカッコいいと思うので、作って下さい。

• 今回の制作箇所について
• 疑似要素の基礎知識
• 疑似要素（pseudo element）とは
• 疑似要素の使い方
• 主な疑似要素
• 疑似要素before,afterの使い方
• ::beforeを使った疑似要素の表示
• ::afterを使った疑似要素の表示
• before,afterに必須のcontentプロパティ
• 実習
• 1.CSSを調整する
• 2.positionを指定する
• 3.下線に見えるようにCSSを書く

今回の制作箇所について

※クライアントが大見出しと言っているのは、企業理念なのでh2の箇所です。

h2に単色の下線をつけるなら、border-bottomを設定して終わり。
ですが、borderでは見本のように左側がグレー/右側が青色と色分けはできません。

お望みのような線を作る方法はいくつかありますが、今回は疑似要素のbeforeとafterを使って作成してみましょう。
前回使ったpotisionプロパティの復習にもなりますよ。

疑似要素の基礎知識

疑似要素（pseudo element）とは

疑似要素は、CSSで作成する要素に似た「要素として扱えるもの」です。
CSSでは、擬似セレクタを使うことで、HTMLには記述されていない要素が存在するかのようにスタイル指定をすることができます。

とは言え、好きな箇所に疑似要素を使えるわけではありません。
マウスオーバー色を設定したレッスンで使った擬似クラスと同様に、あらかじめ用意されている条件にあったキーワードのみ使えます。

疑似要素の使い方

疑似要素は半角コロン2つ+キーワード（どの疑似要素を使うか）で設定します。
今回のお題箇所、h2要素で疑似要素を使ったスタイル指定をしたい場合は、以下のように書きます。

疑似要素と疑似クラスの違いは？

疑似要素と擬似クラスは良く似た存在。
まとめて「疑似セレクタ」と表現されることもありますが、以下の点が異なります。

• 擬似クラス：半角コロン×1で指定する
• 疑似要素：半角コロン×2で指定する

古いバージョンのCSSでは、疑似セレクタは統一して半角コロン×1でした。
その影響で現在も半角コロン×1で書かれた疑似要素がありますが、CSS3では擬似クラスは1つ、疑似要素は2つとコロンの数で区分されています。

また、擬似クラスと疑似要素は、出来ることが違います。

【擬似クラス】
要素が特定の状態・状況にある場合のスタイル指定に使用する。
例）マウスが重なった場合、兄弟要素の中で一番最初の要素

【擬似要素】
要素内の特定の部分に対してスタイル指定を行う
例）要素の一番最初の部分、ユーザーが選択した部分

主な疑似要素

CSSで利用できる主な疑似要素を、簡単に紹介します。

これらは、暗記する必要はありません。
コーディングでよく使われるのは、次のセクションで解説する::beforeと::afterくらいです。そのほかの疑似要素を使う機会は、正直あまりありません。

疑似要素before,afterの使い方

疑似要素の中でも、使用頻度が高いのが::beforeと::afterの２つです。
before,afterを使えると、シンプルなHTMLコードでもデザイン性の高い表示を作ることが出来るようになります。

::beforeを使った疑似要素の表示

早速、::beforeを使って疑似要素を表示させてみましょう。
style.cssに、以下のように追記してください。

style.css

h2::before {
  content: "■";
}

ブラウザで確認してみましょう。
h2見出しの文字の前に、contentプロパティで指定した■が表示されます。

contentは、擬似要素の内容を指定することができるCSSプロパティ。
style.cssに追加した部分は、以下の内容を指示しています。

beforeで作った疑似要素は、index.htmlファイル上には存在しません。
が、ブラウザの検証ツールを使うと確認できます。

検証ツールで■の部分を選択してみてください。
<h2>タグの直下に::beforeがあります。

また、疑似要素（疑似セレクタ）に対しても、通常のスタイル指定のように文字色や背景色・サイズ・余白などを設定できます。

Stylesパネルを使って、試してみましょう。

::afterを使った疑似要素の表示

::afterで疑似要素を作る場合も、CSSの書き方や仕組みは::beforeと同じです。

違うのは疑似要素が差し込まれる場所だけ。
::after疑似要素は、指定した要素の最後に挿入されます。

style.css

h2::after {
  content: "◇";
}

before,afterに必須のcontentプロパティ

疑似要素の ::before と ::after を使うためには、CSSでcontentプロパティを記述するのが必須条件です。cotentを指定してないと、before,after擬似要素は画面上に出現しません。

ですが、デザイン上、中身が空の要素を作りたいときもありますよね。
今回のお題の「線を引く」も、要素内のコンテンツはいりません。

空の疑似要素を挿入したい場合はcontent: "";と、内容を空の状態で記述します。
先程のh2::beforeとh2::after で試してみましょう。

style.css

h2::before {
  content: "";
}

h2::after {
  content: "";
}

ブラウザで表示すると、画面上では疑似要素が消えて見えます。
Elementsパネルで<h2>要素を開いてみると、疑似要素の設定自体はあることが確認できます。

ちなみに、contentプロパティの値では、先程使った文字（文字列）だけではなく、画像や引用符なども設定することができます。指定可能な値については、content - CSS: カスケーディングスタイルシート | MDNをご確認下さい。

実習

お題の「h2見出し下の線」を作っていきましょう。

1.CSSを調整する

サイドバーのには適用されないよう、セレクタを“メインカラムのh2”に限定します。
また、beforeとafterで共通するスタイル指定をまとめて書けるよう、複数セレクタ式に変更しておきます。

style.css

main h2::before,
main h2::after {
  content: "";
}

デザインではh2の文字が中央揃えになので、そちらも設定しておきましょう。

style.css

main h2 {
  text-align: center;
}

2.positionを指定する

デフォルトの状態だと、::beforeや::afterで設定した要素は、見出しテキストの前後に配置されます。

今回のようにテキストの下に置きたい場合は、positionプロパティを使って絶対位置で配置します。

::beforeと::afterを配置するための基点は、親要素となるh2。
style.cssにpositionプロパティを追加しましょう。

style.css

main h2 {
  position: relative;
  text-align: center;
}

main h2::before,
main h2::after {
  content: "";
  position: absolute;
  bottom: 0;
}

まだ疑似要素は大きさがないので、ブラウザ表示で変化はわかりません。
検証ツールのElementsパネルから疑似要素を選択してみると、h2のbottom（下辺）に移動はできているようです。

3.下線に見えるようにCSSを書く

サイズが0×0となっている、空の疑似要素に大きさを指定します。
暫定でwidthは50％、heightは5pxくらいにしておきます。

style.css

main h2::before,
main h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 5px;
}

もう一度検証ツールで確認してみましょう。

beforeもafterも、右に寄ってしまっています。

ここからは個別にスタイル指定をして、デザインに近づけていきます。
背景色も指定してしまいましょう。

style.css

main h2::before{
  left: 0;
  background: gray;
}

main h2::after {
  right: 0;
  background: rgb(58, 110, 188);
}

ほぼ出来ましたね！

デザインと比較すると、縦に詰まったような印象があります。
検証ツールを見ながらベストな位置・余白を探していきましょう。

Stylesパネルで見つけたスタイルをstyle.cssに書き写したら完成です。

style.css

main h2 {
  position: relative;
  margin-bottom: 40px; /* 追加 */
  text-align: center;
}

main h2::before,
main h2::after {
  content: "";
  position: absolute;
  bottom: -8px; /* 変更 */
  width: 50%;
  height: 5px;
}

お疲れ様でした。

ここまでの実習内容を素材としてアップロードしています。
確認用にご活用下さい。

おまけ

上のcssでお題のデザインは完成していますが、mainの幅いっぱいに線が入るとちょっと見にくいですよね。

widthと基点左右からの位置を変更すると、もう少し見やすくなります。

上図の設定は見本ファイルでは「自社プロダクト」の方に設定しています。