通过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,就可以在后边加上标红的星号。

如果大家有更好的建议，请提出来，大家共同进步。