required field(*) for the dropdown is placed downward - css

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/