Do content and :after work only on <labels>, not <input>?

I have a label and an input element:

<label class="required" for="email">Email</label>
<input type="text" id="email" name="email">

I've set the .required class on the label to append a '*' to it with CSS like this:

required:after {
    content:" *";
}

But some fields have no preceding label, so I want to append the '*' just before the input element whether it has a label or not. I've tried setting the .required class on <input> elements, but it's not working. So is the content t开发者_如何转开发rick possible on <label>, but not not <input>? Can I get it to somehow work with <input>?

The problem is that the values specified in the content property, combined with the :before and :after pseudo-elements, apply before or after the element's content, not the element itself.

Basically, that would map to <input type="text" id="email" name="email"> *</input>, which is why your not seeing what you'd expect.

I don't know what your limitations are or how much elbowroom you have, but the semantically correct approach would be to place a <span>*</span> before/after the input element.

FROM: Nombre

TO: Nombre *

You could try this:

form label.required:after {
    content: " *";
    color: red;
}

You can add input or textarea style to a wrapper and then override the default textarea or input style without border and background. Then, as said by Filip, you can add the :after selector with content property to the element instead of the

I am using this approach to display a counter for the slides players in SlideOnline where the number of slides should be displayed in this format "X / Total" but X should be editable. You can see a live example here: http://slideonline.com/presentation/93 - Please look at the bottom right corner of the presentation player to see the counter with numbers.

Try Using ID instead of Class

#required:after {
  content:" *";
  color:red;
}

<label id="required">Name</label>
<input type="text" placeholder="Enter Name">