通過CSS 給界面必選項添加星號

        在制作網頁的時候，如果一個選項是必填的，通常會給選項添加一個紅色星號，來引起用戶的注意；最近筆者剛好遇見一個類似的需求，本來可以用html標簽和style就可搞定，由於筆者需要改動的界面比較多（六個）；好不容易將這些界面改完收工后，同事也在修改這幾個界面，發現這個樣式多處用到，而且筆者處理的方案一樣代碼重復率比較高，就建議筆者將這塊功能提取出來作為公共的模塊，也方便他那塊使用；在此筆者也非常感謝同事提出的問題。好了，具體如下：

1. 界面效果（紅色星號為css添加的模塊）

  

2. css模塊：

.addRedStar:after {
    content: '*';
    color: red;
    font-size: 18px;
}

3. HTML模塊：

<li class="mui-table-view-cell pd_0">
                    <div class="mui-input-group business_form">
                        <div class="mui-input-row">
                            <label  class='addRedStar' >支出類別</label>
                            <input type="text" id="issuesCategoryDesc" data-value="" placeholder="請選擇" name = "" class = "choose_category" readonly>
                        </div>
                        <div class="mui-input-row">
                            <label  class='addRedStar' >支出項目</label>
                            <input type="text" id="issuesClassDesc"    data-value="" placeholder="請選擇" name = "" class = "choose_project" readonly>
                        </div>
                        <div class="mui-input-row">
                            <label  class='addRedStar' >經濟事項</label>
                            <input type="text" id="economicIssuesDesc" data-value="" placeholder="請選擇" name = "economicProject" class = "choose_economics" readonly>
                        </div>
                    </div>
 </li>

       如上述，html在需要的標簽加上css中聲名的addRedStar,就可以在后邊加上標紅的星號。

    如果大家有更好的建議，請提出來，大家共同進步。