ミギムキ

[CSS] アイコンを三角マークにしたリスト

アイコンを三角マークにしたリストのサンプル

サンプルコード

html

<ul class="list_triangle"> <li>アイコンを三角マークにする</li> <li>アイコンを三角マークにする</li> <li>アイコンを三角マークにする</li> </ul>
スポンサー広告

CSS

.list_triangle { padding: 0px; margin: 0px; list-style: none; } .list_triangle > li { position: relative; padding: 0px 0px 0px 1em; } .list_triangle > li:before { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 0px; height: 0px; border: 0.3em solid transparent; border-left: 0.4em solid #3388dd; content: ""; }

補足・解説

スポンサー広告