シンボルの位置が間違っています

Question

私は非常に簡単なものを見落としていると思いますが、問題を見つけることができません。私はrequiredと呼ばれるCSSクラス名を持っており、ここでその上のスペックである第二divに今

<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> 

：

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

私 私はこのようなコードを持ってビューを作成しますオン

レンダリング方法は次のとおりです。

テキストボックスの直後に赤いアスタリスクを表示させるにはどうすればよいですか？ 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>