Estoy haciendo unos inputs radio con imagen, pero cuando se hace check me gustaría ponerle un icono (imagen) como que está seleccionado esa opción. No se muy bien porque el before no se muestra, pero con inspeccionar elemento, si que quita o pone el before.
/* HIDE RADIO */
.radioCat input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.radioCat input[type=radio] + img {
cursor: pointer;
}
.radioCat img {
width: 20%;
}
.radioCat input[type=radio]:checked + img:before {
width: 20px;
height: 20px;
bottom: 0px;
position: absolute;
right: 245px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Light_green_check.svg/1200px-Light_green_check.svg.png) no-repeat;
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="radioCat">
<label style="position: relative;">
<input type="radio" name="test" value="{{ $ico->slug }}" checked>
<img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg">
</label>
<label style="position: relative;">
<input type="radio" name="test" value="{{ $ico->slug }}">
<img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg">
</label>
</div>