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 Going Further with Attribute Selectors and Pseudo-Classes Substring Matching Attribute Selectors - "Begins With" and "Ends With"

James Head
James Head
18,872 Points
Posted by James Head
James Head
18,872 Points

Position of the icon

In this video how would I get the icons to appear on the end of the links and not at the front?

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

My suggestion would be to try combining it with an "after"pseudo element.

So you'd have something like this syntax

 *attributematchingselector*::after {}
Rifqi Fahmi
Rifqi Fahmi
23,164 Points
Rifqi Fahmi
Rifqi Fahmi
23,164 Points

how you write that in comlplete code cause I try adding ::after and it won't work

a[href$=".pdf"]::after { background-image: url('../img/icn-pdf.svg'); }

Jeremy Watssman
Jeremy Watssman
6,213 Points
Jeremy Watssman
Jeremy Watssman
6,213 Points

Actually, an easier way to do this would be to set the "background-position" property to "right".

Then, you'll need to put the padding on the right instead of the left, and you should be set!