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 Foundations Advanced Selectors Pseudo-Elements: ::before and ::after

Posted by Reggie Sibley
Reggie Sibley
6,018 Points

Content:

when using the ::before psuedo class can you put a picture, (such as a phone) before the phone number, or does it have to be the phone unicode icon?

because all i know how to do is..

 .class::before { 
       content: "12706"

}

but i want to replace that unicode icon with a picture, is that possible?

2 Answers

Brett Cole
Brett Cole
10,181 Points
Brett Cole
Brett Cole
10,181 Points

CSS-tricks.com has a description of how to accomplish this. If you search ::after / ::before under Almanac it shows you how to do this. Just note though it mentions that you can't resize the image once its posted.

Katsumi Suno
Katsumi Suno
4,194 Points
Katsumi Suno
Katsumi Suno
4,194 Points

Guil actually shows it in this lesson with the pdf icon. Rewatch the lesson or look at the following code:

.class::before
{
   content: url(/img/yourPicture.png);
}

Of course you have to use your path and picture name ;) Hope that helps!