ul要素に疑似要素とアイコンフォントで矢印(アロー)のアイコンを付ける

スマホなどでよく見る矢印(アロー)アイコン付きのリストを作ってみました。アイコンは:after疑似要素とアイコンフォントで付けた2パターンです。

sponsored link

矢印付きのリストのサンプル

まずはアイコンフォントを使うので、Font Awesomeを使えるようにhead要素内に以下のように記述しておきます。

HTMLはBEM記法を使用して要素セレクタにはなるべく、直接スタイルを当てないようにします。親要素のulにはblock-listクラスを、子要素になるliaにはblock-list__itemblock-list__arrowとしておきます。__は子要素にあたるという意味になります。
1つ目のリストは疑似要素でアイコンを、2つ目のリストにはFontAwesomeを使ってアイコンフォントを表示させます。

block-listクラスはul要素に付けてあるのでデフォルトスタイルをリセットしてボーダーや背景色を付けていきます。
.block-list__item + .block-list__itemは隣接セレクタを使って隣り合っている2つ目と3つ目のblock-list__itemborder-topを指定しています。
.block-list__item aにはテキストが1行だと仮定してheight: 44px;line-height: 44px;でテキストが中央に配置されるようにしています。

.block-list__arrowは矢印を表示させるためのクラスです。transformプロパティでボーダーを45度傾けて矢印にしています(IE9以降)。top:0;bottom: 0;margin:auto;の部分でアイコンを中央に配置します。

.block-list__icon-arrowはFontAwesomeを表示させるためのクラスです。こちらもafter疑似要素を使ってa要素の最後にアイコンが表示されるようにしています。li要素とa要素にpositionを指定してli要素の位置を起点にアイコンフォントを配置できるようにしておきます。

疑似要素でのアイコンの中央配置はtop:50%;margin-top: -.25em;でも同じように中央配置できますが、heightの半分の負の積を計算する必要があるのでメンテナンス性が悪くなります(Sassのローカル変数と演算を使えば計算は不要ですが冗長になりますね)。

ちなみにSassはこのように記述しました。BEM記法には&(アンパサンド)を使います。

参考にしたエントリー