.checkmark { display: inline-block; width: 10px; height: 10px; border: 1px solid #555; border-radius: 50%; margin-right: 5px; position: relative; } .checkmark::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 6px; height: 3px; transform: translate(-50%, -50%) rotate(-45deg); border-right: 2px solid #fff; border-top: 2px solid #fff; }
首先,大家创建一个名为“checkmark”的CSS类,用来定义小方块的样式。通过设置其为“inline-block”并且设置宽高相等,大家可以确保它是一个正方形。通过设置“border”和“border-radius”,大家可以让它看起来像一个小圆圈。
接下来,通过“::after”伪类,大家向小方块中添加了一个旋转45度的白色三角形,从而形成了对勾的效果。通过设置“position”为“absolute”使其相对于小方块位置固定,通过“transform”将其旋转并使其位于小方块中央。
最后,将小方块和文字包裹在一个容器中,即可轻松实现有对勾的小方块效果。