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

Posted by Lana Toogood
Lana Toogood
10,158 Points

CSS ::after item not displaying next to div

Hi, I'm trying to create a search bar with an image next to it with HTML & CSS. At the moment, the image is being swallowed by the div and not displaying at all, instead of appearing next to it on the right. This is my code: .type-field::after { content: ""; display: block; background: url('../img/icons/add-button-purple.png'); width: 20px; padding: 1px; float: right; margin: 2px 6px; } Can anyone explain how to get the image to appear to the right instead of inside the div?

1 Answer

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

An "after" element is incorporated as the last child of the selected element, so it's not technically "after" it as the name might imply. So you might need an additional outer container to get the effect you want.

Another issue you might have here is that the new element has a width but no height, so the entire background image might not get fully displayed.

Lana Toogood
Lana Toogood
10,158 Points

Thanks Steven - appreciate your help. I ended up adding the image next to it and giving it a fluid width, which looks nicer than using the ::after anyway. Cheers!