HTML
<div class="container">
<div class="row justify-content-between">
<div class="col-md-3 col-checkbox">
<input id="checkbox-01" type="checkbox">
<label for="checkbox-01">Sunglasses</label>
</div>
<div class="col-md-3 col-checkbox">
<input id="checkbox-02" type="checkbox">
<label for="checkbox-02">Pencils</label>
</div>
<div class="col-md-3 col-checkbox">
<input id="checkbox-03" type="checkbox">
<label for="checkbox-03">Shoes</label>
</div>
<div class="col-md-3 col-checkbox">
<input id="checkbox-04" type="checkbox">
<label for="checkbox-04">Notepad</label>
</div>
</div>
</div>
CSS
.col-checkbox input {
display: none;
}
.col-checkbox label {
display: block;
position: relative;
padding: 10px 20px 4px 40px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.30);
color: rgba(0, 0, 0, 0.30);
cursor: pointer;
}
.col-checkbox label::before {
content: '';
display: block;
position: absolute;
top: 10px;
left: 0;
width: 24px;
height: 24px;
border: 2px solid rgba(0, 0, 0, 0.30);
border-radius: 100%;
}
.col-checkbox label:hover, input:focus + label {
border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
color: rgba(0, 0, 0, 1.00);
}
.col-checkbox label::before:hover {
border: 2px solid rgba(0, 0, 0, 0.60);
color: rgba(0, 0, 0, 1.00);
}
.col-checkbox label:hover::before {
border: 2px solid rgba(0, 0, 0, 0.60);
}
.col-checkbox input:checked + label {
border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
color: rgba(0, 0, 0, 0.90);
}
.col-checkbox input:checked + label::before {
position: absolute;
padding-top: 2px;
padding-left: 4px;
font-family: 'FontAwesome';
font-size: 12px;
content: '\f00c';
background: rgba(255, 255, 255, 0.80);
border: 2px solid rgba(0, 0, 0, 0.60);
color: rgba(0, 0, 0, 1.00);
font-weight: bold;
}
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes design
Checkboxes as switch buttons design
Circular image with border and shadow design
Cursor
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Image caption
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons design
Radio buttons as stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design