css - 使用 :after pseudoelement with :required pseudoclass

Question

如果这个问题已经有答案，请原谅我，但我找不到。

毕竟我想加一个星号<input required>元素。

我发现我可以使用 :required 来设计这些样式选择器。

我想使用 :after添加星号的伪元素。

我的 CSS:

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

在 Opera 30 和 Chrome 40 中，我看到了这一点(请注意，几乎所有这些都有 required 属性，请参见下面的代码。):

在 Firefox 39、IE 11 和 Edge 中，不显示伪元素。为什么伪元素只显示在<input type="date"/>上而不是任何其他输入或选择？而且，更重要的是，我怎样才能让它显示在所有 required 上？元素？

如果重要的话，我正在使用 bootstrap3 和 jquery。

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. 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. 所以这不是无效行为。

Answer 1

伪元素对 input 不起作用，因为 input 是空元素。您必须在每个输入后放置一个元素，然后使用 :required 伪类和 + 组合器来设置样式。