Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by Chris Feltus
Chris Feltus
3,969 Points

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{
  content:"*";
}

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,109 Points
Kevin Korte
Kevin Korte
28,109 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

http://codepen.io/kevink/pen/wBmGwJ

Preston Skaggs
Preston Skaggs
11,818 Points
Preston Skaggs
Preston Skaggs
11,818 Points

Try using one colon.

form input:after{
    content:"*";
}