CSSの疑似要素で表示したアイコンを右寄せ＆上下中央に配置
CSSの疑似要素::afterをつかえば、わざわざ画像をつかわなくてもHTMLとCSSだけで良い感じのボタンが作れます。ここ数年、個人的にはボタン画像を作成する機会がめっきり減りました。
そんな中でよくつかうのが今回紹介するCSSです。fontawesomeなんかのアイコンをボタンの右に寄せて、かつ上下中央配置にする方法になります。
サンプル
See the Pen
pBwqrX by keitasakurai (@mdesignyokohama)
on CodePen.
ボタン名が必ず一行で収まるのであれば、positionをつかわなくてもfloatで対応できますが、複数行のときにアイコンが上下中央になりません。そのため汎用性を考慮してposition:absoluteをつかった実装方法を取り入れています。
