符号的位置是错误的CSS

Question

我相信我很容易忽略一些事情，但我似乎无法找到问题。

在我的创建视图中，我有这样的代码：

CompositeItemWriter

现在在第二个<div class="form-group"> @Html.LabelFor(model => model.Total, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10 required"> @Html.EditorFor(model => model.Total, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Total, "", new { @class = "text-danger" }) </div> </div> 我有一个名为div的css类名称，以下是其中的规范：

required

现在这是它呈现的方式：

如何在文本框后面显示红色星号？我在CSS中缺少什么？

Answer 1

使用.required:before

   .required:before{
    content: "*";
    font-weight: bold;
    color: red;
    float:left;
}
#input{
  float:left;
}

Answer 2

我已经弄清楚了。

CSS：

.required:after{
content: "*";
font-weight: bold;
color: red;
float:left;
margin-left: 5px;
}

#input{
    float:left;
}

HTML：

<div class="form-group">
        @Html.LabelFor(model => model.Total, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10 required">
            @Html.EditorFor(model => model.Total, new { htmlAttributes = new { @id = "input", @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Total, "", new { @class = "text-danger" })
        </div>
</div>