Bootstrap 3 - Add an asterisk to the input on the same line

Question

I tried:

<form name="form" class="form-horizontal form-article" role="form" data-ng-submit="save()">
        <div class="col-md-12">
            <div class="form-group">
                <div>
                    <input type="text" class="form-control" placeholder="Title" required="required" data-ng-model="article.title">
                </div>
                <span>*</span>
            </div>
</form>

and

.form-article .form-group div:after {
    color: red;
    content: '*';
}

but the result is always

via:

<form name="form" class="form-horizontal form-article" role="form" data-ng-submit="save()">
        <div class="col-md-12">
            <div class="form-group">
                <div class="col-md-10">
                    <input type="text" class="form-control" placeholder="Title" required="required" data-ng-model="article.title">
                </div>
                <span class="col-md-2">*</span>
            </div>
</form>

but the result is very ugly: (

Answer 1

Demo script

Try using:

.form-group div{
    position:relative;
    margin-right:15px;
}
.form-group div:after{
    position:absolute;
    content:'*';
    color:red;
    right:-10px;
    top:0;
}

pi You also did not close one of your div tags in your published code.

Answer 2

Create a CSS Class

.required-field:after {
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 3px;
    top: 10px;
}

Use it only for the tag you want.

<div class="form-group">
  <label for="EmployeeName" class="control-label required-field col-sm-2">Employee Name</label>
  <div class="col-sm-4">
    @Html.TextBoxFor(m => m.EmployeeName, new { @class = "form-control", ng_model = "Employee.EmployeeName", alpha_numeric = "", required = "true" })
  </div>
  <label for="" class="control-label required-field col-sm-2">Birth Date</label>
  <div class="col-sm-4">
     @Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control", ng_model = "Employee.BirthDate", required = "true" })
  </div>