Unable show tick mark on image while clicking an image? - html

Question

I am trying to show a tick mark on top of the image when a user clicks on it. I have an input radio button element and label both wrapped in anchor element and inside the label i have and an image element and i use css to apply tick mark. Whenever i click on the image nothing happens. Please i would appreciate if anyone can help. Here is the snippets
.icon {
margin: 5px 0;
}
.icon input {
display: none;
}
.icon img {
vertical-align: middle;
width: 50%;
border: 2px solid greenyellow;
}
.icon input:checked {
background: rgba(0,0,0,0.5);
}
.icon input:checked::after{
content: '✔';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
color: black;
font-size: 20px;
text-align: center;
border: 1px solid black;
border-radius: 50%;
}
<div class="row">
<a href="#" class="col-sm-4 icon">
<input type="radio" name="selimg" id="selimg1">
<label for="selimg1">
<img src="./images/baby-bottle.png">
</label>
</a>
<a href="#" class="col-sm-4 icon">
<input type="radio" name="selimg" id="selimg2">
<label for="selimg2">
<img src="./images/badge.png">
</label>
</a>
<a href="#" class="col-sm-4 icon">
<img src="./images/cardiologist.png">
</a>
</div>

Answer 1

::before and ::after only work on container elements, so you can not use that on your inputs.
Instead of .icon input:checked::after try using .icon input:checked + label::before.
(The rest of your CSS needs adjustments to make it show how you want, but this will at least make it show up and you can move it where it needs to be)
.icon {
margin: 5px 0;
}
.icon input {
display: none;
}
.icon img {
vertical-align: middle;
width: 50%;
border: 2px solid greenyellow;
}
.icon input:checked {
background: rgba(0, 0, 0, 0.5);
}
.icon input:checked + label::before {
content: '✔';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
color: black;
font-size: 20px;
text-align: center;
border: 1px solid black;
border-radius: 50%;
}
<div class="row">
<a href="#" class="col-sm-4 icon">
<input type="radio" name="selimg" id="selimg1">
<label for="selimg1">
<img src="./images/baby-bottle.png">
</label>
</a>
<a href="#" class="col-sm-4 icon">
<input type="radio" name="selimg" id="selimg2">
<label for="selimg2">
<img src="./images/badge.png">
</label>
</a>
<a href="#" class="col-sm-4 icon">
<img src="./images/cardiologist.png">
</a>
</div>