將星號添加到<label>的末尾

是否可以在<label>內的文本字符串的末尾添加星號？將星號添加到<label>的末尾

這是我有什麼，但（當然）星號顯示整個標籤後面：

<label class="xy-form-label-required" for="zipcode"> 
    Zip Code 
    <span class="xy-form-labelinfo"> 
     Allowed characters a-z A-z 0-9 ,.- 
     Could also be an information about the field... 
    </span> 
</label>

我的CSS代碼：

form.xy-form .xy-form-label-required:after { 
    color: grey; 
    content: ' *'; 
}

這是結果：

郵編
允許的字符a-z A-z 0-9，.-
*

這就是我想要的而不改變html標記。

郵編 *
允許的字符AZ，az或0-9，.-

來源

2013-01-11 mayrs

CSS會在被告知的情況下在'**'後面附加asterix **'''。你可能需要改變你的HTML標記或者使用客戶端語言如jquery來附加它。 – Amyth

你可以用javascript實現這一點，除非你只想用CSS和HTML – Morpheus

避免更改HTML標記的原因是什麼？我認爲可以將星號移動到需要使用位置相對/負值邊界或類似位置的地方，但該解決方案並不靈活。所以，也許改變標記更好？ \ –

我不得不改變的標記，像這樣，這是不可能才達到我想要的東西沒有<選擇（這還不可用）：

<label class="xy-form-label" for="zipcode"> 
    <span class="mc-form-asterisk>Zip Code</span> 
    <span class="xy-form-labelinfo"> 
     Allowed characters a-z A-z 0-9 ,.- 
     Could also be an information about the field... 
    </span> 
</label>

我的CSS代碼：

form.xy-form .xy-form-label .xy-form-asterisk:after, 
form.xy-form .xy-form-label-required:after { 
    display: inline-block; 
    color: grey; 
    content: '\a0*'; 
}

我還是覺得還不錯。儘管如此，感謝您的建議傢伙！

來源

2013-01-16 13:55:18 mayrs

錯字分開，你想要的星號前的信息標籤：

.xy-form-label-required .xy-form-labelinfo:before{ 
    color: grey; 
    content: ' *'; 
}

來源

2013-01-11 13:09:16

，你可以簡單地添加下面的CSS代碼代替

.xy-form-label-required > span.xy-form-labelinfo:before{ 
    color: grey; 
    content: " *"; 
}

來源

2013-01-11 13:10:09 Amyth

這不起作用。根據作者想要達到的效果跨越新行（大概顯示：塊）和文本後的星號。不在跨越新行之前。 – Zielun

你在元素後面添加了asterix，而不是Text節點。爲了達到你想要的效果，你需要使用javascript，例如：http://jsbin.com/udiroz/2/edit 但我不會這樣。

不知道這是否可能在你的情況，但我會建議標記改變這樣的事情：http://jsbin.com/udiroz/1/edit 在我看來標籤是不是爲了增加信息的好地方像字符是允許的，或者不驗證錯誤等

來源

2013-01-11 13:53:58 Zielun

的確我必須改變標記。 – mayrs

將星號添加到<label>的末尾

回答

相關問題