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


After Selector Issue

Having a small issue using the ::after selector in CSS. I am trying to add an * at the end of every form input field

here is the code I tried.

form input::after{

Am I not using it correctly? I was under the impression that it adds something to the right of the element like an icon or character. Similarly ::before adds something to the left of an element.

codepen http://codepen.io/anon/pen/Ggxpzz

2 Answers

Kevin Korte
Kevin Korte
28,148 Points

You can not put pseudo elements on inputs. You can only put pseudo elements on "container" items, or items that can contain other things. You can not put anything else inside of an input box. The browser actually renders the pseudo elements inside of the container element they are called on. This is ultimately why in this case this does not work.

Any sort of div, span, button, etc this would work on, because other things can be rendered inside of each.

Also, don't get confused that :before means left and :after means right. It's an easy mistake to make, but it's false.

:before is as it's name implies, this content gets added before the containing elements content, and the same is true with :after, it'll be loaded after the containing elements content is loaded. You can position them to be wherever you want.

Edit* I'll add to the :before and :after that z-index and an elements stacking need to paid attention to. In this codepn, you can see that both stack over the primary box, but are also both inside of it. You can also notice the :before is placed before the :after


Try using one colon.

form input:after{