在 Web 前端開發中，我們常常需要對頁面元素進行美化和動效的處理。其中，將方框中打上鉤勾圖案是一種常見的需求。這里我們將演示如何使用 CSS 實現這一效果。

box-sizing: border-box;
width: 20px;
height: 20px;
border: 1px solid #ccc;
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 10px;
height: 6px;
border: 2px solid #fff;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}

以上代碼中，我們首先定義了方框的大小和邊框，并將其定位到相對位置上。然后使用 ::after 偽元素來表示鉤勾的樣式，設置了鉤勾的大小和邊框，并通過 transform: rotate(-45deg) 屬性將其進行了旋轉，以形成鉤勾的形狀。需要注意的是，該偽元素的定位方式為絕對定位，且上、右、下、左都設置為 0，這樣可以將其限制在方框之內。

最后，我們只需將上述代碼應用至一系列需要打鉤的方框之上，就可以輕松實現方框打鉤效果了。