用僞元素在必填字段中添加星號

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秒，您可以使用Flexbox的轉向他們。

.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>