ここまでCSS講座として疑似要素や擬似クラス、アニメーションなんかを作ってきました。

今回は疑似要素の応用としてbeforeやafterを使ってアイコンを作ってみましょう。

まずは比較的簡単に作ることが出来る三角アイコンを作ってみましょう。

サイズが0のときのボーダーはどうなるのか

普段borderプロパティを使うときに見る形って1本線だと思います。

しかし幅も高さも0だった時、どんな形になるか知ってますか？

実は内側に三角の形になるんですよね。

高さか幅が増えると、三角形というよりも台形の形になります。

どちらかというと台形のほうが正しい形なのですが、高さや幅が0となる場合 台形の上辺(短い方)の幅がなくなり三角形に見えるということですね。

例えばborder-topなら▼の形。

border-bottomなら▲の形。

普段なら枠を作るために使うborderプロパティですが、この三角形の形を利用して 疑似要素を組み合わせるといわゆるアローマーク(矢印とか再生マークとか)を作ることができます。

ちょっと手を込んだことをすればCSSで様々なアイコンを作ることが可能とも言えます。

borderプロパティを利用して三角形を作ろう

それでは早速borderを使って三角形を作ってみましょう。

先ほども言ったように幅と高さを0にしてborderのサイズを指定するだけになります。

今回はスマートフォンのサイトによくありがちな、 ボタンの右端にある右向きの三角マーク（再生マークと同じ形）を作ってみましょう。

.arrow {
  display:block;
  width:200px;
  height:44px;
  line-height:44px;
  border:1px solid #000;
  font-size:16px;
  position:relative;
}

.arrow::before {
  content:'';
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border:7px solid transparent;
  border-left-color:#000;
}

<a href="#" class="arrow">続きを読む</a>

見てもらいたいのは疑似要素の幅高さ０と、 ボーダーをまず一括で上下左右に適用してそのカラーを透明にすることで 見えないボーダーが適用されます。

その後、左のボーダーカラーだけ色を指定することにより 左だけ可視化され再生マークの形になるというわけです。

実際には上下右もボーダーがあるのですがtransparentを指定してるので見えないという仕組みになっています。

左のボーダーだけ指定すればいいんじゃないの？

って思うかも知れませんが左だけだとサイズが0のときは表示されなくなってしまいます。

なので一括でまずはボーダーのサイズと透明色を指定して、 その後に色を付けたいボーダーにカラーを個別で設定する必要があるというわけです。

1pxのライン状アイコンを作ってみる

今度は高さと幅を与えて且つ同じサイズにしてボーダー1pxで作るArrowアイコンを作りましょう。

これもスマホデザインでよく見るやつですね。

文字で書くと「＞」こんな感じのアイコンになります。

先ほどはサイズ0で作ったので再生マークのようなベタ塗りのアイコンになりましたが、 今度はサイズを与えることによって1pxのライン状アイコンを作ります。

まずは先ほどのコードを流用します。

.arrowとhtml側は変更していないので省きます。

.arrow::before {
  content:'';
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-top:1px solid #000;
  border-right:1px solid #000;
}

段階を追って説明します。

まずは高さと幅を10pxと指定しました。

そしてボーダーのサイズは１として上と右に設定しています。

現状の形としては「┐」のような形になっているのがわかると思います。

このままだとアイコンぽくないので、これを45度回転させます。

.arrow::before {
  content:'';
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:10px;
  height:10px;
  border-top:1px solid #000;
  border-right:1px solid #000;
}

これでスマートフォンのメニューみたいな形のアイコンを作ることが出来ました。

もし画像とかfont-awesomeを利用して設定しているなら これを機に自分で作ってみて適用してみるといいでしょう。

画像だと読み込みが発生しますし、これぐらいであればわざわざfont-awesomeを使う必要もないでしょう。

mixinとして用意しておけば1行書くだけでアイコンを適用することが出来ます。