文字后显示所需星号星号？

Question

我试图在文本之后显示asterisk red star，但是文本的宽度不允许在文本后面插入星号。见下面的例子

代码

<div class="col-sm-4 col-sm-offset-1 required-field">
     @Html.LabelFor(model => model.ContactPhoneNumber, new { @class = "control-label-nobold" })
</div>

生成Html

<div class="col-sm-4 col-sm-offset-1 required-field">
  <label class="control-label-nobold" for="ContactPhoneNumber">If you wish to be contacted by phone, enter your phone number</label>
</div>

css

.required-field:after {
    content: "*";
    font-weight: bold;
    color: red;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

页面

星显示下一行

​

​

文本的宽度不允许我添加星号。

​

​

如何在文字旁边添加星星？

Answer 1

将:后加到标签上。

.required-field .control-label-nobold:after {
content: "*";
font-weight: bold;
color: red;
}

更新:对不起，错过了所需的字段课程。

Answer 2

使用此方法，可以在文本后面显示所需的星号星号。

HTML：

<label>Title<span>*</span></label>

代码：$(‘标签跨度’).css(‘颜色’，‘红色’)；