CSS の :after でアイコン追加と上下中央配置

擬似要素 :after を利用

IE6 を対応させるなどの条件のために、これまでは直接 img 要素で入れたり background-image として入れることが多かったアイコンですが、スマホ対応だったりモダンブラウザのみの対応の場合は、擬似要素の :after が活用できるようになりました。

CSS2 で導入された時点ではコロンは１つでしたが、CSS3 ではコロンが2つの ::after も利用できるようになっています。擬似クラスが増えた際に擬似要素と擬似クラスを明確に分けるために、 after や before などの擬似要素はコロン２つとなりました。

現状では :after も ::after もどちらも利用できる状況のため、どちらを使っても大丈夫です。より古いブラウザ（IE8など）でも対応させるような場合は コロン１つの :after を使っているほうが無難な現状です。

:after でアイコンを追加する例

要素の後ろにアイコンや文字を入れるだけであれば :after に contentのプロパティを設定するだけで追加されます。

:afterの例としてのCSS

#demo1 li {
  position: relative;
}
#demo1 li:after {
  font-family: 'FontAwesome';
  content: "\f054";
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -12px;
}

サンプル

リスト要素（リンクつける場合はその内側のa要素）に position: relative; をつけて、その要素の:afterに position: absolute; のコンテンツを、 top: 50%; と、そのコンテンツの高さの半分のネガティブマージン margin-top: -12px; （表示しているテキストの高さの半分）をつけることで上下中央に配置されます。psition 利用ではなく、 float:right; や text-align:right でも右側に配置は可能ですが、複数行の時に上下中央に来ないため、今回は position: absolute; の上から50%位置指定とネガティブマージンでテキストの半分戻しての指定をして配置しています。

ちなみにサンプルでは表示のアイコンを Webフォントの Font Awesome でつけています。

Font Awesome

Webフォントを利用する他にもHTMLを入れられるため、画像を直接指定するなども可能です。

アイコンを中央に表示する場合にご活用ください。