CSSで矢印アイコン付きのリストを作る

今回はモバイルでよく見る、矢印アイコン付きのリストを作る方法をご紹介いたします。

サンプル

右端に矢印アイコンが表示されています。

サンプル

html

ulにクラスがついてる普通のリストです。

css

ul liは基本のプロハティとアイコン用のプロパティに分かれています。

「:before」、「:after」の疑似要素で、円と矢印の表現を行っています。

解説1

アイコンの上下の位置を決めています。

解説2

円の形とその位置を決めています。

解説3

矢印の形とその位置を決めています。「rotate」で矢印の向きを調整しています。

全ソース

まとめ

  • ulはクラスがついてる普通のリスト。
  • リストタグは基本のプロハティとアイコン用のプロパティに分かれている。
  • 「:before」、「:after」の疑似要素で、円と矢印の表現を行っている。
  • 「rotate」で矢印の向きを調整している。
スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

CSSで矢印アイコン付きのリストを作る
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!