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>   

これは、「顧客番号」ドロップダウンの上に必須フィールド (*) を追加する必要がある私のコードです。「requiredstar」は、アスタリスクを表示するためにコントロール グループで追加した css エンティティですが、アスタリスクは下に配置しています（開始端）。以下に示すのは私のcssクラスです。これを解決する解決策はありますか？

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

}