Using :after pseudoelement with :required pseudoclass

Question

Pardon me if this question is already answered, but I couldn't find it.

I am trying to put an asterisk after all <input required> elements.

I found that I can style these with the :required selector.

I would like to use the :after pseudoelement to add an asterisk.

My CSS:

*:required:after {
    content:"*";
    font-size:48px;
    color:red;
    position:relative;
    top:9px;
}

In Opera 30 and Chrome 40, I see this (note that nearly all of these have the required attribute, see code below.):

In Firefox 39, IE 11, and Edge no pseudoelements are displayed. Why is it that the pseudoelement only displays on the <input type="date"/> and not on any of the other inputs or selects? And, more importantly, how can I make it display on all required elements?

I'm using bootstrap3 and jquery, if that matters.

HTML:

<label>Title 
    <select name="title" id="title" class="form-control" required> <!-- Trigger Gender here I think... -->
        <option value="Mr.">Mr.</option>
        <option value="Mrs.">Mrs.</option>
        <option value="Miss">Miss</option>
        <option value="Ms.">Ms.</option>
        <option value="Dr.">Dr.</option>
        <option value="Rev.">Rev.</option>
    </select>
</label>
<label>First Name (as on Passport)  <input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/></label>
<label>Last Name (as on Passport)   <input type="text" name="lastName" id="lastName" placeholder="Studd" class="form-control" required/></label>
<label>Maiden Name (if applicable)  <input type="text" name="maidenName" id="maidenName" class="form-control"/></label>
<label>Other Names                  <textarea name="aliases" id="aliases" placeholder="C. T. Studd" class="form-control"></textarea></label>
<label>Date of Birth                <input type="date" name="birthday" id="birthday" class="form-control" placeholder="12/02/1860" required/></label>
<label>Gender Autofilled
    <select name="gender" id="gender" class="form-control" required>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</label>

Note that the spec says: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification. So this is not invalid behavior.

Answer 1

Pseudo-elements don't work on inputs, because inputs are empty elements. You'll have to put an element after each input, then use the :required pseudo-class and the + combinator to style that.

Answer 2

:after or :before doesn't work on input or img elements. It can be used on container elements e.g. <div></div>

Reference

In your case I suggest you make use of label instead of input elements. Add a class for label elements which has a required input inside. Of course this would need a bit more of work since you have to set the positions correctly.

e.g.

<label class="required-container">
  First Name (as on Passport)  
  <input type="text" name="firstName" id="firstName" placeholder="Charles" class="form-control" required/>
</label>

Your css:

label.required-container:after {
    content:"*";
    font-size:48px;
    color:red;
    position:relative;
    top:9px;
}

Answer 3

Currently, the spec does not define behavior of pseudoelements with replaced elements, so this is not required to be consistent across browsers or even within browsers apparently.

The reason is that insertion using content makes a replaced element, and replaced replaced elements are not yet defined. From MDN, replaced elements are: external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

Until an indeterminate future draft, the best bet is either to use the *:required+:after selector with an empty span (or whatever) or use :required pseudoclass with something that can be used with a replaced element, like a background-image.

We can hope that the current behavior of -webkit- in replacing content:'' after type='date' points toward allowing pseudoelements on all elements. We'll see.

Answer 4

One way to influence what is displayed "in the" input based on one of the input's attributes is to simply place a span or any other suitable element after the input. Then, it is just simple linking via adjacent selector.

Fiddle: http://jsfiddle.net/hvzjf002/.

HTML:

<label>
    <input type = "text" required/><span></span>
</label>

CSS:

label {
    display: inline-block;
    position: relative;
}

label > input {
    height: 25px;
    font: normal 14px/25px Sans-Serif;
    padding: 0 25px 0 10px;
    border-radius: 5px;
    border: 1px solid #aaa;
    outline: 0;
}

label > input:required + span:before {
    content:"\f069";
    font: normal 14px/1 "Font Awesome";
    color: red;
    position: absolute;
    bottom: 50%;
    right: 5px;
    transform: translateY(50%);
}