擬似要素で必須フィールドにアスタリスクを追加する

Question

必要なフィールドに対してCSSでアスタリスクを自動的に付けたいと思います。

私のマークアップ -

<label for="DsrCode">DSR Code</label> 
<input id="DsrCode" name="DsrCode" required="required" type="text" value="" /> 

現在、私が試した -

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

をしかし、それは働いていません。

Answer 1

input最初にlabelを調整できる場合は、+または~のいずれかを使用して兄弟セレクタで行うことができます。

input:required + label:after { 
 
    content: " * "; 
 
    color: red; 
 
}

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

あなたが視覚的に表示するlabelまず、input秒を必要とするならば、あなたはそれらをシフトするフレキシボックスを使用することができます。

.fieldset { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: flex-end; 
 
} 
 
input:required + label:before { 
 
    content: " * "; 
 
    color: red; 
 
}

<div class="fieldset"> 
 
    <input type="text" required> 
 
    <label>Label</label> 
 
</div>