實現對號效果，一種思路是利用現成的符號，直接在網上搜索到 √，插入頁面。另一種思路是本文要介紹的用 CSS 實現，思路是：
給塊級元素設置寬度和高度
設置元素相鄰的兩個 border
旋轉元素
HTML
<div class="check-style-unequal-width"></div>
解析
此處需要使用塊級元素
不需要設置元素內容
CSS
.check-style-unequal-width {
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}
解析
設置寬度和高度，得出一個矩形效果，並且矩形中沒有內容
設置相鄰 border 的樣式，得到對號的大體輪廓
使用旋轉屬性，成功得到對號
運行效果 https://img-blog.csdn.net/20180923214713800?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE4NDg2MTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
check 運行效果
解析
如上圖，第一個為兩條線等寬的對號效果，第二個為兩條線不等寬的對號效果；第三個為兩條線等寬等長的對號效果。詳細實現請參見 check 源碼。
注意事項
行級元素直接設置寬度和高度沒有用，需要設置其 display 使其變為塊級元素。例如：span 需要設置 display 為 inline-block 才能適用於本例效果
可以根據實際需求調整元素寬度和高度
可以根據實際需求設置不同的 border，以及相鄰 border 的寬度
可以對此效果做簡單的修改，作用於偽元素 ::before 和 ::after。可參考 ::before & ::after
---------------------
作者：南張人
來源：CSDN
原文：https://blog.csdn.net/u011848617/article/details/82824054