After Selector Issue

Question

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

Answer 1 · 2015-02-17T22:12:04Z

February 17, 2015 10:12pm

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

Answer 2 · 2015-02-17T22:10:50Z

February 17, 2015 10:10pm

Try using one colon.

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

Welcome to the Treehouse Community

Looking to learn something new?

Chris Feltus

Chris Feltus

After Selector Issue

2 Answers

Kevin Korte

Kevin Korte

Preston Skaggs

Preston Skaggs