CSSでテキストの最後に上下中央揃えでアイコンを配置する方法

テキストの最後にアイコンを加えたいことがありますよね。例えばリンク先の情報を視覚的に伝えたり、ボタンに装飾を加えたりなど。表現したい見た目によってコーディングの方法が変わってくるためアイコンの設置方法をいくつか解説したいと思います。

---

CSSのプロパティ別アイコン設置方法

display:inline-block;でアイコンを配置する

まずはアイコンをinline-block化して配置する方法です。

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

ここでは、<p>タグでテキストを囲み、疑似要素の::after※に”display:inline-block”を設定してアイコンを配置しています。

※疑似要素ではなく<span>タグなどで表現してもよいですが、例に挙げたような視覚的にしか意味を持たない装飾アイコンの場合は疑似要素で表現することが多いです。

ちなみにアイコンやフォントの種類によってはイメージ通り中央揃えにならないことがあります。今回はマイナスマージンを使用して微調整しています。

display:flex;で横並びにして配置する

次はflexboxを使って配置する方法です。

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

同じく<p>タグでテキストを囲み、疑似要素の::afterを使っていますが、<p>タグ自体に”display:flex;”を設定することで、テキストとアイコンが横並びになるようにしています。

flexboxの特徴は専用のプロパティ”align-items:center;”を使用して簡単に上下中央揃えにできることです。（マイナスマージンで微調整していますが、、、）
テキストとアイコンのサイズが違う場合でも自動で中央揃えになってくれるのでとても便利です。
ただ、要素全体の中央に配置されるので複数行になった時も必ず中央に配置されます。

position:absolute;で位置指定して配置する

次にposition:absolute;で位置を指定して配置する方法です。

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

同じく<p>タグと疑似要素::afterで表現していますが、flexboxの”align-itmes”ではなく”position:absolute;”と”top”,”right”プロパティでアイコン位置の指定をしています。こちらはせっかくなのでemで微調整してみました。（親要素のフォントサイズが可変になった場合に有効です。）

“position:absolute;”の特徴としては”top”からの位置を指定できるため、こちらもテキストとアイコンのサイズが違う場合でも柔軟に対応することができます。
ただ、複数行になった場合でも必ず指定の位置をキープします。

"top:50%;","transform:translateY(-50%);などを指定することでこちらでも自動で上下中央に揃えることもできます。

---

プロパティを組み合わせた応用編

最後に別々のプロパティを組み合わせてテキストの前後で別々の場所にアイコンを設置する方法を紹介します。

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

先頭の装飾を”position:absolue;”で位置固定し、末尾の装飾は”inline-block”にて最後の文字の後にくるようにしています。

例だと同じアイコンを指定しているのでわかりづらいかもしれないですが、テキストの先頭に装飾をつけて、末尾にリンクのアイコンを表示させたりするときに、ボックスの幅によって折り返しがおきても柔軟に対応することができます。

---

まとめ

CSSでテキストの最後にアイコンを配置する方法は、様々な方法で実装が可能です。
文章の折り返しやアイコンのサイズなどを考慮しシーンにあった方法で使い分けていただくとよいかと思います。