vue表单必填项后面添加星号*

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>