在純 CSS 中,我們可以使用偽元素::before
和::after
來實現對勾的效果。
.checkmark:before { content: ""; display: block; border: solid; border-width: 0 2px 2px 0; transform: rotate(45deg); height: 15px; width: 7px; margin-top: -5px; margin-left: 5px; } .checkmark:after { content: ""; display: block; border: solid; border-width: 0px 2px 2px 0px; transform: rotate(-45deg); height: 15px; width: 3px; margin-top: -13px; margin-left: 14px; }
以上代碼中,我們使用border-width
設置邊框樣式,使用transform
旋轉元素,使用height
和width
設置元素的高度和寬度,并用margin-top
和margin-left
調整元素的位置。
同時,我們需要給元素添加::before
和::after
偽元素并設置其為塊級元素,讓它們與原始元素的樣式保持一致,同時用content: ""
來為其添加空內容。這樣,對勾的效果就可以實現了。