required field(*) for the dropdown is placed downward

Question

<div style="width: 50%; float:right">
<div id="formDiv">
<div class="control-group requiredStar">    
<label class="control-label"  for="CustNo">Customer No</label>
<div class="controls" >
<div id="replaceCustomerListDiv">
<s:select  data-rel="chosen" id="CustNo" name="CustNo" list="customerlist" listKey="id"           listValue="name" headerKey="0" headerValue="--SELECT--"  `enter code    here`onchange="getContracDetails(this.value)" cssClass="required"/>              
</div>  
</div>  
</div>
</div>   

this is my code for which i have to add a required field(*) above the "Customer no" drop down,the 'requiredstar' is css entity that i have added with the control group in order to display the asterix,but the asterix is placing downwards(start end),the below shown is my css class,any solution to solve this?

.control-group.requiredStar .controls:after {
 content:"*";
 color:red;
 font-family: 'Glyphicons Halflings';

/*  font-weight: bold;*/
/*  font-size: medium;*/
 font-size: 16px;
 position: relative;


vertical-align: top;

}

Answer 1

You could set the requiredStar class on the label rather than the control group like this:

HTML

<label class="control-label requiredStar" for="CustNo">Customer No</label>

CSS

.control-label.requiredStar:after {
  content:"*";
  color:red; 
}

Here's a new fiddle with it working: http://jsfiddle.net/8vpdd7r5/