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

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

::before and ::after

Can I change the height of an image in CSS :before/:after pseudo-elements? My "pdf.png" becomes too large. How can I resize this logo , so that It can fit with the text.

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Try placing the image in the background, set the element diisplay mode to "inline-block" and then set the size as desired:

.pdflink::after {
  content: "";                         /* add only background (empty content) */
  background: url('/images/pdf.png');  /* the background image */
  background-size: cover;              /* fit the background to the new element */
  display: inline-block;               /* make it flow but also use size measurements */
  height: 1em;                         /* make it one character high */
  width: 1em;                          /* make it one character wide */
}

It also might make sense to use image editing software to create versions of the images that are already the correct size.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

OK, I added comments to each line.

Happy coding!

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Thank You.....so much :) . Person like you are the reason why Treehouse has become so popular in few years . The way you help students and always be there for their help. That's incredible really. :)

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You should be able to use height and width properties in your CSS rule.

For a complete analysis and more specific answer, please show your actual code (possibly using a workspace "snapshot").

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Suppose I want to decorate links to certain file types using an image. I could declare my links as-

<a href='foo.pdf' class='pdflink'>A File!</a>

and then have CSS like-

.pdflink:after { content: url('/images/pdf.png') }

Now, this works great, except if pdf.png isn't the right size for my link text. So , how will I get size of of image to be comparable to link text? Please explain. Thank YOu.