テキストの前後に共通の記号やアイコンを付けたい（before/after）

今回は、CSSの「::before」と「::after」を使用してテキストや要素の直前または直後に共通の記号やアイコンなどのコンテンツを配置する方法を紹介します。

「::before」と「::after」を使用すると下記の様に決まったクラス名を付けてあげるだけで決まったコンテンツ（アイコン）が直前直後に付いてくれます。

テキストの前後に共通の記号やアイコンを付ける方法

テキストの前後に共通の記号やアイコンを付ける方法は、「::before」と「::after」の擬似クラスと「content」プロパティを使います。

「::before」はテキストや要素の直前にコンテンツを追加します。
「::after」はテキストや要素の直後にコンテンツを追加します。

「::before」と「::after」の擬似クラスを付けたセレクタに対して「content」プロパティで追加したいコンテンツを指定します。

「content」プロパティの記述の仕方は「content: “ここに追加したいコンテンツ“;」と書きます。

例文

上記の例文のHTMLとCSSです。

<p class="firsticon lasticon">クラス名にfirsticonを付ける事で先頭にlasticonを付ける事で語尾にアイコンが付きます</p>

/*直前に入るコンテンツ*/
.firsticon::before {
 content: "\f445"; /*Font Awesome 5 Freeのユニコード*/
 font-family: "Font Awesome 5 Free"; /*Font Awesome 5 Freeの指定*/
 color:red; /*色*/
}
/*直後に入るコンテンツ*/
.lasticon::after {
 content: "\f445"; /*Font Awesome 5 Freeのユニコード*/
 font-family: "Font Awesome 5 Free"; /*Font Awesome 5 Freeの指定*/
 color:blueviolet; /*色*/
}

contentプロパティ内のコンテンツは「▲」や「※」などの記号にしてもOKです。FontAwesomeのアイコンを使用する時はunicodeを使用します。（バックスラッシュを「/」にしてしまうとエラーなるので注意。）

このstyleを一度作ってしまえば今後、王冠アイコンを付けたい場合に「firsticon」もしくは「lasticon」のクラスを付けるだけで済みます。この様に効率的にコーディングを行う際や、ちょっとした装飾を付けたい時などに非常に役に立ちます。

コンテンツを画像にする場合

「content」プロパティに画像を配置したい場合は「content」に対して「url(…/sample/page_1/image_001.png)」の様に直接画像を指定すれば挿入する事が出来ます。

しかし、この記述だと下記の様に実際のサイズで入ってしまい調整が難しいです。（contentプロパティで指定した画像の大きさはCSSで調整出来ない。）

<p class="icoBimage">画像が実際のサイズで表示されてしまいます。</p>

.icoBimage::before {
 content: url(/wp-content/uploads/2020/05/same-e1589018206567.png);
 display: inline-block;
}

なのでコンテンツに画像を挿入するには、「background-image」プロパティを使用します。

contentプロパティの記述は「content: “”;」と中身を空にします。次に「background-image:url(…/sample/page_1/image_001.png);」と記述して背景画像を置きます。

これは空白のコンテンツに対して背景画像を設定しているので、実質画像のみが配置された事になります。また背景画像のサイズの調整はCSSで可能なので、contentの画像の調整が出来てる様に見せる事が出来ます。

<p class="icoBimage2">背景画像で指定する事でCSSの幅と高さを効かせられるので調整が可能になります。</p>

<style>
.icoBimage2::before {
 content: "";
 display: inline-block;
 width: 20px;
 height: 20px;
 background-image:url(/wp-content/uploads/2020/05/same-e1589018206567.png);
 background-size: contain;
 vertical-align: middle;
}
</style>

以上が「テキストの前後に共通の記号やアイコンを付けたい（before/after）」でした。

before/afterの使い方をマスターすればWEBデザイン、コーディングに置いて効率化やちょっとした装飾を付けたりと出来、一段階レベルの上がったWEBサイトが出来る様になります。