🐥 Moving the required asterisk to the end of form labels in Element Plus

By default, Element Plus displays the required asterisk before a form label, for example: *Name. While this is functional, some design systems prefer placing the asterisk after the label instead, like Name*. Fortunately, it’s easy to adjust this behavior using either a CSS override or a custom label slot.

If you want to apply this change throughout your app, you can hide the default prefix and append your own asterisk using CSS:

.el-form-item.is-required .el-form-item__label:before {
  display: none;
}

.el-form-item.is-required .el-form-item__label:after {
  content: '*';
  color: var(--el-color-danger);
  margin-left: 4px;
}

This snippet removes the default “before” pseudo-element and adds a red asterisk to the end of each required label. You can include this in your global stylesheet or inside a scoped <style> block.

If you only want to change this for specific fields, you can use the #label slot on ElFormItem:

<ElFormItem prop="name" required>
  <template #label>
    Name<span style="color: var(--el-color-danger); margin-left: 4px">*</span>
  </template>
  <ElInput v-model="form.name" />
</ElFormItem>

This approach gives you full control over the label content and allows you to combine the asterisk with tooltips, icons, or other elements.

If you want a global change, a small CSS override is the simplest approach.

For fine-grained control, using the label slot is more flexible. Both options work seamlessly with Element Plus and ensure your required field indicators fit your preferred design style.