Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialGeoffrey Neal
30,298 PointsUnable to resize images created using the ::before pseudo-element.
I've been trying to create a facebook icon alongside the facebook p element using the ::before pseudo-element. The image is too large and, while it appears, it does not resize to fit inside the p element. All that happens is the area where it should go resizes which I guess makes sense, but the image just extends outside of it. How do I resize the image itself?
Here is my code: (It's not showing on here for some reason but the div's id is "social_media")
(HTML)
<div id="social_media" class="neuton">
<ul>
<h4>Follow me on:</h4>
<li><a href="#"><p>Facebook</p></a></li>
<li><a href="#"><img src="img/icons/twitter-icon.png" class="social_icon"><p>Twitter</p></a></li>
<li><a href="#"><img src="img/icons/linkedin-icon.png" class="social_icon"><p>Linked In</p></a></li>
</ul>
</div>
(CSS)
#social_media a p:first-child::before {
content: url(../img/icons/facebook-icon.png);
display: inline-block;
width: 20px;
height: 20px;
}
Geoffrey Neal
30,298 PointsThanks Robert for the Markdown Cheatsheet, that's going to be a huge help!
2 Answers
Robert Richey
Courses Plus Student 16,352 PointsBy moving the url of the image to a background property, it obeyed sizing. I made a CodePen to demonstrate this.
Looking through the documentation at MDN content - CSS didn't reveal if the injected value from content is coerced to inline, but all experimentation suggests this is the case and would explain why it's ignoring re-sizing. By moving the url to background, you also gain the benefit of being able to use all the different background properties: background-repeat, background-position, background-size, etc.
Hope this helps,
Cheers
Geoffrey Neal
30,298 PointsPerfect, it works. Thanks for your help!
Jacob Brech
7,224 PointsHey guys, I am having the same problem. Robert RIchey, it seems that your CodePen demonstration is not accessible anymore. I am itching to see your solution:) Anyway you could help? Thanks
jlampstack
23,932 PointsCan try something like this using background image...
.jpg::before {
display:inline-block;
height:32px;
width:32px;
margin-right: 5px;
content: "";
background:url(../img/ExampleImage.jpg) no-repeat 0 0;
background-size: 32px 32px;
}
These are just my numbers, but play with the numbers to get the settings you like. Also, don't forget to change the background image to your own image.
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsHi Geoffrey,
I added markdown to help make the code more readable. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.
Cheers!