在文字后显示所需的星号?

Jam*_*123 1 html css asp.net-mvc jquery

我试图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>
Run Code Online (Sandbox Code Playgroud)

生成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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

明星显示下一行

在此输入图像描述

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

在此输入图像描述

如何在文字旁边添加星标?

小智 6

添加:after到标签.

.required-field .control-label-nobold:after {
content: "*";
font-weight: bold;
color: red;
}
Run Code Online (Sandbox Code Playgroud)

更新:抱歉,错过了.required-field类.

  • 也可以使用`.required-field label:after`,如果它更适合一般用途. (3认同)