Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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.

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!