vue使用elementui的form表单必填字段标签红色星号默认是放到label左边，现在需放在label右边。
查看页面css可知，红色星号*是使用伪类::before实现的，如图：
image.png
方法一：
可使用form表单属性hide-required-asterisk隐藏label标签旁的红色星号，以及使用::after在标签后添加即可
image.png
代码实现如下
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
label-position="right"
hide-required-asterisk
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动地址" prop="address">
<el-input v-model="ruleForm.address"></el-input>
</el-form-item>
</el-form>
<style scoped>
::v-deep .is-required .el-form-item__label::after {
content: "*";
color: #ff0000;
margin-left: 4px;
}
</style>
方法二：
form表单属label标签左边的红色星号使用css深度检测器v-deep将颜色改为白色，以及使用::after在标签后添加即可
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
label-position="right"
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动地址" prop="address">
<el-input v-model="ruleForm.address"></el-input>
</el-form-item>
</el-form>
<style scoped>
::v-deep .el-form-item > .el-form-item__label::before {
content: "" !important;
color: #000 !important;
}
::v-deep .el-form-item__label::after {
content: "*";
color: #ffffff;
margin-left: 4px;
}
::v-deep .is-required .el-form-item__label::after {
content: "*";
color: #ff0000;
margin-left: 4px;
}
</style>
