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

Santiago Enciso
Santiago Enciso
17,789 Points
Posted by Santiago Enciso
Santiago Enciso
17,789 Points

CSS not generating images

The images do not show on the browser. If it isn't a syntax error then I don't know what else it could be.

.jpg::before { content: url(../img/icn-picture.svg); margin-right: 8px; }

I also tried to put quotation marks inside the url argument for the file path, no cigar:

.zip::before { content: url('../img/icn-zip.svg'); margin-right: 8px; }

This one is not working either:

h1::before { content: ""; display: line-block; width: 24px; height: 24px; border-radius: 50%; background: coral; margin: 0 10px; }

Could It be a browser problem? Or am I too blind to see a syntax error?

Marcus Parsons
Marcus Parsons
15,719 Points

Can you post a snapshot to your workspace?

Travis Eubanks
Travis Eubanks
12,566 Points
Travis Eubanks
Travis Eubanks
12,566 Points

YEs please post a snap shot.

Also, I know it seems silly, but did you make sure your path your giving to the image is correct?

Placid Rodrigues
Placid Rodrigues
12,630 Points
Placid Rodrigues
Placid Rodrigues
12,630 Points

There's an error in the last declaration. display: line-block. Should be inline-block.

5 Answers

morgan segura
PLUS
morgan segura
Courses Plus Student 6,934 Points
morgan segura
morgan segura
Courses Plus Student 6,934 Points

Where are your images in relation to the CSS file? Is your CSS file in a folder? Do you have them in a folder or are they on the same level as your CSS file?

My guess is you don't need the "../" in from of your image call because they are in the same location as your CSS file. Try removing the "../" from .jpg::before { content: url(../img/icn-picture.svg); margin-right: 8px; }

Or if its not that simple, check this out:

https://css-tricks.com/almanac/selectors/a/after-and-before/

Good Luck.

eduardomejia2
PLUS
eduardomejia2
Courses Plus Student 22,237 Points
eduardomejia2
eduardomejia2
Courses Plus Student 22,237 Points

If your index.html file or the file in which you are working is on the root folder you do not need the dots before the / on the image path, because when the CSS is executed it will act like if it was in the same folder than the HTML or PHP file.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The paths in the css file are relative to where the css file is located.