パーツ番号 02-05-05 ・ CSSのみ

矢印マーカーリスト

「→」を先頭マーカーに使ったシンプルなリストです。流れやステップの並びを軽やかに示す用途に向いています。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-05-list">
          <li>目的を明確にする</li>
          <li>ターゲットを設定する</li>
          <li>構成を組み立てる</li>
          <li>公開して振り返る</li>
        </ul>

CSS

.d02-05-05-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;font-size:14px;color:#333;}
        .d02-05-05-list li{position:relative;padding:6px 0 6px 26px;}
        .d02-05-05-list li::before{content:"→";position:absolute;left:0;color:#c2185b;font-weight:bold;}

クラス名 .d02-05-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。