タッチメニューの > みたいなアイコンを擬似要素で | Unformed Building

スマートフォンサイトのナビゲーションで、タッチできるリンクエリアの右端に > みたいなアイコンがあることが多いのですが、それを擬似要素で作ろうという試みです。 ちょっと必要になったので作ったんですが、あまり使い道はないと思います......。 一応言っておきますが、画像を作って背景に指定したほうが面倒が少ないと思います。 どうせ小さい画像ですし......。 とりあえずシンプルに CSS を書いてみましょう。 擬似要素を2つ使います。 CSS にコメント入れてあるので、何をやっているかは大体分かると思います。 今度はこれを気軽に使えるように、SCSS にしてカスタムしやすくしてみます。 これで色や大きさを変えるのが楽になりました。padding-right の部分は自動化せずに引数で指定するようにすれば細かい調整ができるので、そっちの方がいいのかもしれません。 実際に使う場合には引数のデフォルト値を指定しておくとトラブルが減るかと思います。 また、ベンダープリフィックスをいちいち書いてますが、実際には mixin を作っておくとより楽に書けるでしょう。 色を半透明にしたい場合は、::before と ::after が重ならずにぴったりくっつくようにしないといけないので少し難しくなります。 この CSS(SCSS) の応用でできるので、試してみるのもいいかもしれませんね。

http://bit.ly/R2Z4rW