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 trial

CSS CSS Selectors Advanced Selectors Pseudo-Elements - ::before and ::after

Geoffrey Neal
Geoffrey Neal
30,298 Points
Posted by Geoffrey Neal
Geoffrey Neal
30,298 Points

Unable 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;
}
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi 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!

Geoffrey Neal
Geoffrey Neal
30,298 Points
Geoffrey Neal
Geoffrey Neal
30,298 Points

Thanks Robert for the Markdown Cheatsheet, that's going to be a huge help!

2 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

By 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
Geoffrey Neal
30,298 Points
Geoffrey Neal
Geoffrey Neal
30,298 Points

Perfect, it works. Thanks for your help!

Jacob Brech
Jacob Brech
7,224 Points
Jacob Brech
Jacob Brech
7,224 Points

Hey 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
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Can 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.