アイコンや補足テキストを追加したいだけなのに、HTMLに<span>を増やしていませんか？
ちょっとした装飾のためにHTMLが増えていくと、構造が分かりづらくなり、管理もしにくくなります。
そんなときに便利なのが、CSSの疑似要素 ::before と ::after です。
ここでは、HTMLを書き足さずに画像やテキストを表示する方法を、実例とあわせて確認します。
::before と ::after は、主に装飾や補足表示に向いている疑似要素です。本文として重要な情報は、できるだけHTML側に書くようにしましょう。
HTMLを書き足さずに画像を表示する方法
まずはデベロッパーツールなどで、対象に使われているセレクタを調べます。
そして、そのセレクタに ::before や ::after を書き足します。
例えば、::before を使うと、対象要素の「中の先頭」に画像やテキストを追加して表示できます。
HTMLを書き足さなくても、見た目の要素を挿入できるのが特徴です。
::before と ::after は名前の通り「前・後ろ」を表しますが、「どちらを先に使うべきか」という順番のルールはありません。あくまで「どこに表示したいか」で使い分けるのがポイントです。
実際に疑似要素を使って文字の隣に画像を表示する
こちらをご覧ください
::before を使って、文字の左にWordPressのロゴを表示させました。
文字には icon-text というクラスを付けています。実際に使われているCSSは次の通りです。
.icon-text {
display: inline-flex;
align-items: center;
}
.icon-text::before {
content: "";
display: inline-block;
width: 40px;
height: 40px;
margin-right: 5px;
background-image: url("画像URL");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}疑似要素を使うための基本プロパティ
.icon-text::before {
content: "";
display: inline-block;
}まず重要なのはこの2つです。
content
疑似要素を表示するために必須のプロパティです。
content: "";これがないと、::before は存在していても画面に表示されません。
中身が空で良いので、必ず指定します。
content: url(...) を使って画像を表示することもできますが、この方法だと画像は元のサイズで表示され、サイズ調整やレイアウトのコントロールがしづらくなります。
そのため、疑似要素で画像を扱う場合は background-image を使うのが一般的です。
display
疑似要素の表示方法を決めます。
display: inline-block;inline-block にすることで、
- 幅（width）
- 高さ（height）
を指定できるようになります。もし display を指定しないと、サイズ調整がうまくできません。
画像として見せるための設定
width: 40px;
height: 40px;疑似要素のサイズを決めています。このサイズの中に画像が表示されます。
background-image: url("ここに画像URL");ここで画像を読み込みます。
background-size: contain;画像を要素の中に収まるように調整します。はみ出さず、縦横比も保たれます。
background-repeat: no-repeat;画像の繰り返しを止めます。指定しないと、タイル状に繰り返されることがあります。
background-position: center;画像を中央に配置します。位置を中央にそろえたいときに使います。
margin-right: 5px;疑似要素（アイコン）とテキストの間に余白を作ります。
キレイに並べるための親要素側のポイント
.icon-text {
display: inline-flex;
align-items: center;
}アイコンとテキストを横並びにして、縦位置をそろえたいときは、親要素側の指定も重要です。
inline-flex→ 横並びにするalign-items: center→ 縦位置を中央に揃える
これを入れておくと、アイコンとテキストのズレが起きにくくなります。
疑似要素で文字を表示する
疑似要素で画像を表示したときと同じように、CSSだけで文字を追加して表示できます。
ここでは ::after を使い、～ようこそ私のWebサイトへ～ の下に英語とフランス語を表示しています。
～ようこそ私のWebサイトへ～
実際に使っているコードは次の通りです。
<div class="wrapper">
<p class="welcome">～ようこそ私のWebサイトへ～</p>
</div>.wrapper {
text-align: center;
}
.welcome {
display: inline-block;
border: 1px solid #ccc;
padding: 16px;
text-align: center;
}
.welcome::after {
content: "Thank you for coming\A Merci de votre visite";
display: block;
margin-top: 8px;
font-size: 0.9em;
white-space: pre-wrap;
}今回は文字だけを使うので、content: "文字" を使用します。
疑似要素 ::after は、親要素の中の最後に表示され、通常はテキストの後ろに続けて表示されます。
そこで display: block; を指定すると、疑似要素がブロック要素として扱われ、前後に改行が入るため、結果としてテキストの下に表示されます。
※ display: block; を指定しない場合は、テキストの後ろに横並びで表示されます。
また、text-align のような一部のプロパティは親要素から継承されるため、中央揃えなどの指定もそのまま適用されます。
疑似要素 ::after は、もともとテキストの後ろに続けて表示されます。下の行に表示したい場合は、display: block; を指定するのがポイントです。
CSS内ではバックスラッシュAで改行することができる
CSSだけで改行を入れることもできます。content の中で \A を使うと、改行として扱われます。
content: "Thank you for coming\A Merci de votre visite";
white-space: pre-wrap;
\A だけでは改行が反映されないため、あわせて white-space: pre-wrap; を指定します。
white-space: pre という値もあります。\A で改行はできますが、自動では折り返しません。
イメージしてみよう
例えば、次の文章があるとします。
Thank you for coming Merci de votre visite
これを横幅が狭い画面で表示するとどうなるでしょうか。
① 通常（white-space: normal）
自動で折り返される
Thank you for coming
Merci de votre visite
② white-space: pre
折り返されない
Thank you for coming Merci de votre visite
（はみ出す or 横スクロール）
\Aの改行 → OK 。でも各行が長いと→はみ出す
③ white-space: pre-wrap
必要なら折り返す
Thank you for coming
Merci de votre visite
\A の改行もちゃんと効く。画面が狭ければさらに折り返す。
※注意点
\A の直後に英字（A〜F）や数字が続く場合、エスケープとしてまとめて解釈されてしまうことがあります。
そのため、スペースを入れて区切ると安全です。
- ❌
\AA→ 改行されない（別の文字扱い） - ⭕
\A A→ 改行される - ⭕
\Aの後ろにスペースを入れる → 安全
::before/::afterはHTMLを書かずに要素を追加できる（装飾に便利）contentを指定しないと表示されないdisplay: block;を使うことで下の行に表示できる\Aとwhite-spaceを使うことで改行も可能
疑似要素を使うとカスタマイズの幅が広がる
疑似要素を使うと、HTMLを大きく変えずに、アイコンや補足テキストなどの見た目を調整しやすくなります。
すべての場面で使う必要はありませんが、ちょっとした装飾やカスタマイズをしたいときに覚えておくと便利なCSSです。
まずはアイコンの表示や補足テキストの追加など、扱いやすいところから試してみるのがよいと思います。
補足： バックスラッシュは、日本語キーボードでは円マーク「¥」として表示されますが、プログラム上の役割（改行コードなど）は同じです。半角の「¥」をそのまま使っても問題ありません。
コメント