ミギムキ

[CSS] アイコンをチェックマークにしたリスト

チェックマークアイコンのリスト

サンプルコード

html

<ul class="list_check"> <li>ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。</li> <li>ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。</li> <li>ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。</li> </ul>

CSS

.list_check { padding: 0px; margin: 0px; list-style: none; } .list_check > li { position: relative; padding: 0px 0px 0px 2em; margin: 0px; font-size: 18px; } .list_check > li::before, .list_check > li::after { position: absolute; top: 50%; height: 1em; content: ""; } .list_check > li::before { left: 0px; transform: translateY(-50%); width: 1em; border: 1px solid #3388dd; } .list_check > li::after { left: 0.5em; transform: translateY(-75%) rotate(45deg); width: 0.5em; border-bottom: 3px solid #3388dd; border-right: 3px solid #3388dd; } .list_check > li + li { margin: 1em 0px 0px; }

枠なしのチェックマークリスト

.list_check { padding: 0px; margin: 0px; list-style: none; } .list_check > li { position: relative; padding: 0px 0px 0px 2em; margin: 0px; font-size: 18px; } .list_check > li::before { position: absolute; top: 50%; left: 0px; transform: translateY(-75%) rotate(45deg); width: 0.5em; height: 1em; border-bottom: 3px solid #3388dd; border-right: 3px solid #3388dd; content: ""; } .list_check > li + li { margin: 1em 0px 0px; }

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。