Check List 為常見的 Component，在不改變 HTML 前提下可使用 :before 實作。
Version
CSS 3
Check List
在每個 list 之前都有勾勾。
<template>
<ul class="check-list">
<li>SEO</li>
<li>SPA</li>
<li>Serverless</li>
</ul>
</template>
<style scoped>
.check-list {
list-style: none;
}
.check-list li:before {
content: '\2714';
color: #f00;
margin: 0 0.5rem 0 -1rem;
}
</style>
10 行
.check-list {
list-style: none;
}
設定 check list style：
list-style: none：由於<li>之前要使用勾勾，因此使用none將原本 style 取消
14 行
.check-list li:before {
content: '\2714';
color: #f00;
margin: 0 0.5rem 0 -1rem;
}
使用 before 在 <li> 前新增勾勾
content: '\2714'：新增勾勾color: #f00：設定勾勾顏色margin: 0 0.5rem 0 -1rem：設定勾勾左右 margin
Conclusion
- 若可修改 HTML，可直接在 HTML 新增勾勾；若無法修改 HTML，則可透過
:before新增勾勾