CSSの疑似要素で表示したアイコンを右寄せ&上下中央に配置

FRONTEND

2019.04.8

2019.04.12

CSSの疑似要素で表示したアイコンを右寄せ&上下中央に配置

CSSの疑似要素::afterをつかえば、わざわざ画像をつかわなくてもHTMLとCSSだけで良い感じのボタンが作れます。ここ数年、個人的にはボタン画像を作成する機会がめっきり減りました。

そんな中でよくつかうのが今回紹介するCSSです。fontawesomeなんかのアイコンをボタンの右に寄せて、かつ上下中央配置にする方法になります。

サンプル

See the Pen
pBwqrX
by keitasakurai (@mdesignyokohama)
on CodePen.

ボタン名が必ず一行で収まるのであれば、positionをつかわなくてもfloatで対応できますが、複数行のときにアイコンが上下中央になりません。そのため汎用性を考慮してposition:absoluteをつかった実装方法を取り入れています。