【CSS】リストデザイン【シンプル】

シンプルなリストデザインを作りました。
全てhoverで簡単に動作します。

さんかく

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeにborder-leftで三角を作っています。

やじるし

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeで三角、afterで横棒を描いています。

まる　○

See the Pen
by kurosu haruka (@skysound98)
on CodePen.

beforeのborderを丸くしています。

ばつ　×

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeとafterでborderを引き、それを交差させています。

ちぇっく

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeのborder-leftとborder-bottomだけを設定し傾けています。

ノート風

●と■と◇

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeを丸くしてマークにしています。
薄い色で点線を入れるとノートっぽくなりますよね。

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

穴あき風

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeでhover時の色を、afterで丸を作っています。
afterの色を背景色と同じにすることで穴あきに見えます。

吹き出し風

丸と四角があります。

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

beforeで吹き出しのとんがり部分をafterで数字周りを作っています。

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

二桁になると崩れます。

波紋

See the Pen
リスト by kurosu haruka (@skysound98)
on CodePen.

background-colorborderbox-shadowで３重になるようにしています。