Design comparison
Solution retrospective
Hi, I have a question.
May I know why I could not add the SVG icon using the background-image property inside ::after pseudo-element? It only can be loaded when I put the image inside the content property. You can check my code at line 181. Any thoughts?
Community feedback
- @Dana-HongPosted almost 2 years ago
Hi Aima,
Good work with this solution. If you want to put the image in a pseduo-element as a background image, you have to set the parent of the pseudo-element to
position: relative;
, and the pseudo-element toposition: absolute;
. However, you would then need to turn off the repeating background images withbackground-repeat: no-repeat;
, then add padding to the parent and adjust the positioning on the pseudo-element.Another solution would be to use an
<img>
tag, since these are inline by default.Hope this helps!
Marked as helpful1@aimaduddinPosted almost 2 years ago@Dana-Hong Thank you for the explanation, Dana. 😀
0
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