- 簡単にカスタマイズ可能
- 再利用性が高い
- 使いやすい構造
HTML
<ul class="list-check-box">
<li>簡単にカスタマイズ可能</li>
<li>再利用性が高い</li>
<li>使いやすい構造</li>
</ul>
CSS
.list-check-box {
list-style: none;
padding: 0;
margin: 24px 0;
}
.list-check-box li {
position: relative;
background: #e0f2f1;
color: #064e3b;
padding: 12px 16px 12px 36px;
margin-bottom: 10px;
border-left: 5px solid #10b981;
border-radius: 4px;
font-size: 14px;
}
.list-check-box li::before {
content: '';
position: absolute;
left: 12px;
top: 14px;
width: 15px;
height: 10px;
border-left: 2px solid #064e3b;
border-bottom: 2px solid #064e3b;
transform: rotate(-45deg);
}