Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Well, in this challenge, I learned two valuable things:
- It is not possible to create a pseudo-element from an image element. I tried several times, and then I searched and found this article on Stack Overflow
.image::after ❌ .image-wrapper::after ✅
- I learned how to apply a hover selector to an ::after pseudo-element.
/* for example */
.card__image__wrapper:hover:after{
opacity: 1;
}
Community feedback
- @geomydasPosted about 2 months ago
Not really feedback but the reason why ::after and ::before don't work is this.
When you are using ::after or ::before, there is an element added inside that element. It would look like this.
<div> ::after Lorem ipsum ::before </div>
It won't work on void elements or elements that don't need a closing tag such as
<img />
,<link />
,<hr />
as there is no space to do so<img />
See?
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord