スマホでタップできることを示すアイコンなどをCSSのみで実装してみましょう

あたり前だろうと思っていることが実はあたり前ではないとうことがありますね。 スマホサイトのデザインでよくある、タップできる領域の右端に矢印みたいなのがついてるものがあります。 こんなやつですね。 こんな時に矢印みたいなアイコンをCSSで実装してみましょう。 以下のHTMLとCSSで実装可能です。 HTML <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこさしすせそたちつてとなにぬねの</a></li> </ul> CSS * { margin: 0; padding: 0; } a { display: block; position: relative; border-bottom: 1px solid #ccc; padding: 11px 25px 11px 11px; color: #000; font-weight

[hideyasu_o]

“<ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこさしすせそたちつてとなにぬねの</a></li> </ul>”

[ryownet]

スマホの矢印をつくるcss

[momochin44]

css3でチェックアイコンや→アイコンを作る - Tags: #css3