ハンバーガーメニューのアイコンをCSSで作る

ハンバーガーメニューのアイコンをCSSで作る方法をご紹介します。
以下の方法は、簡単な横方向の3本線のアイコンです。

MENU

<p class="sample"><a href="#">MENU</a></p> p.sample a { padding:8px 10px 8px 35px; display:inline-block; position:relative; background-color:#333; color:#fff; } p.sample a:before, p.sample a:after { content:""; display:block; position:absolute; left:10px; width:15px; z-index:1; } p.sample a:before { border-top:2px solid #fff; border-bottom:2px solid #fff; top:-webkit-calc(50% - 6px); top:-moz-calc(50% - 6px); top:calc(50% - 6px); height:8px; } p.sample a:after { border-top:2px solid #fff; top:-webkit-calc(50% - 1px); top:-moz-calc(50% - 1px); top:calc(50% - 1px); height:0; }

疑似要素beforeを使用して上下の線を作り、疑似要素afterで中央の線を作ります。