经过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,就能够在后边加上标红的星号。

    若是你们有更好的建议，请提出来，你们共同进步。