將Asterisk添加到a的末尾

Question

是否可以在<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: ' *';
}

---

這是結果：

郵政編碼
允許的字符az Az 0-9，.-
*

這是我想要在不改變html標記的情況下實現的。

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

Answer 1

您只需添加以下CSS代碼即可

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

Answer 2

Typo除外，你想要信息標簽前的星號：

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

Answer 3

我不得不像這樣更改標記，如果沒有<選擇器（現在還沒有），就不可能得到我想要的東西：

<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*';
}

我覺得還是那么糟糕。 不過，謝謝你的建議！

Answer 4

您在元素之后添加了asterix，而不是Text節點。 要實現你想要的效果，你需要使用javascript，例如： http ： //jsbin.com/udiroz/2/edit但我不會這樣做 。

不知道你的情況是否可行，但我建議將標記更改為： http ： //jsbin.com/udiroz/1/edit在我看來，標簽不適合其他信息，如允許或不允許使用哪些字符，驗證錯誤等。