やりたかったこと
スマホサイトの制作にて。
リンクの右の方に出てくる、> 形の矢印、あるじゃないですか。
デザイナーさんから「そこは画像で切り出す」と言われたのですが、いやいや、css でできるじゃないか(やり方しらないけど)と思ってやり方探しました。
コード
ありました。
ほぼコピペでばっちり動いたので、ここにはコードを貼りません。
下記リンクを参照してください。
参考にしたのは、1-4. 矢印アイコン #1 です。
この記事すっごく役に立ちそうです。
ありがたい。
注意点
ほぼコピペ、でしたがちょっとだけ変えました。
最初は、
ul li a::after {
/*省略*/
}
こういうコードだったので、コピペしたら想定していなかった所に > が出てきて大変なことに(笑)
実は、ページ内に、ul li a とマークアップした箇所がいくつかあったのです。
そこで、矢印をつけたいところだけ、クラスを指定しました。
.list_link li a::after {
/*省略*/
}
<ul class="list_link">
<li><a href="#">list 01</a></li>
</ul>
まとめ
矢印をつける方法として、アイコンフォントを使う手もあるようです。
こちらのページで紹介されているようなアイコンフォント、そのうち使ってみたいなと思いました。