在製作網頁的時候，如果一個選項是必填的，通常會給選項新增一個紅色星號，來引起使用者的注意；最近筆者剛好遇見一個類似的需求，本來可以用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,就可以在後邊加上標紅的星號。

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