做內容和：下班後只在<labels>，而不是<input>？

Question

我有一個標籤和輸入元素：

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

我設置的標籤追加一個「*」將其與這樣的CSS在.required類：

required:after { 
    content:" *"; 
} 

但一些字段沒有前面的標籤，所以我想在輸入元素之前追加'*'，不管它是否有標籤。我試過在<input>元素上設置.required類，但它不起作用。那麼<label>上的內容技巧是可能的，但不是<input>？我可以得到它以<input>以某種方式工作？

Answer 1

的問題是，在content屬性中指定的值，結合:before和:after僞元素，apply之前或該元素的內容，而不是元素本身之後。

基本上，這將映射到<input type="text" id="email" name="email"> *</input>，這就是爲什麼你沒有看到你所期望的。

我不知道你的限制是多少，你有多少肘部空間，但是語義上正確的方法是在輸入元素之前/之後放置一個<span>*</span>。

Answer 2

您可以將輸入或textarea樣式添加到包裝中，然後覆蓋默認textarea或沒有邊框和背景的輸入樣式。然後，正如Filip所說，你可以添加：content屬性之後的選擇器，而不是

我使用這種方法在SlideOnline中顯示幻燈片播放器的計數器，其中應顯示幻燈片的數量以這種格式「X/Total」，但X應該是可編輯的。您可以在此處看到一個實例：http://slideonline.com/presentation/93 - 請查看演示播放器的右下角以查看帶數字的計數器。

Answer 3

FROM：農佈雷

TO：農佈雷*

你可以試試這個：

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