Checkmarks and Xs with Pure CSS (Using Pseudo Elements)
A check mark created purely from pseudo elements and CSS.Let’s say someone completes a form on your website and you then show them a confirmation message. Maybe you want to show a checkbox to the left of that message but don’t want to bulk things up with loading an image or icon font. Give this a whirl:
.confirmation_message:after, .confirmation_message:before {
content:" ";
background:black;
height:5px;
position:absolute;
}
.confirmation_message:before {
width:15px;
left:0;
top:24px;
transform:rotate(35deg);
}
.confirmation_message:after {
width:25px;
left:5px;
top:19px;
transform:rotate(-55deg);
}Or maybe they neglected to complete some necessary field, so you’d like to slap an X on there as an alternative icon (though as the letter x is available via normal ASCII characters it’s a lot simpler to do than this):
.confirmation_message:after, .confirmation_message:before {
content:" ";
background:black;
width:15px;
}
.confirmation_message:before {
height:5px;
left:0;
top:24px;
transform:rotate(35deg);
}
.confirmation_message:after {
height:5px;
left:0;
top:24px;
transform:rotate(-55deg);
}