CSS復(fù)選框可以在網(wǎng)頁中用于讓用戶進行多項選擇。在設(shè)計網(wǎng)頁時，我們常常需要美化這些復(fù)選框，使得它們更加美觀和易于使用。其中一個常見的美化方式是把復(fù)選框放在文字的左邊。下面就是實現(xiàn)這種效果的CSS樣式。

input[type=checkbox] {
position: absolute;
opacity: 0;
}
input[type=checkbox] + label:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 20px;
height: 20px;
background-color: #fff;
border: 2px solid #555;
border-radius: 3px;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
color: #555;
font-size: 16px;
line-height: 20px;
text-align: center;
font-weight: bold;
}
input[type=checkbox] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
font-size: 16px;
}

以上代碼中使用了偽元素:before來創(chuàng)建了一個代表復(fù)選框的方框。當(dāng)復(fù)選框被選中時，使用了:before偽元素的content屬性來創(chuàng)建了一個代表選中狀態(tài)的符號。同時，我還用CSS把這個符號放在了方框的中央，并調(diào)整了它的樣式以讓它更加可見。

如果我們想要讓復(fù)選框在文字的右邊，只需要把:before偽元素的樣式從label:before移到label:after即可。