How to denote required form attributes with an *

[Harry-Lees]

I asked this first here before realising that repository was for Vue 2. I'm not sure if this Q&A applies in both repositories (sorry).

Hi, I was wondering what the best way is of denoting required form attributes with an asterisk by the form label.

If I have the following form element:

<label for="myFormInput">{{ $t("form.form_label") }}</label>
<input required id="myFormInput" ... />

(I know the HTML required attribute enforces the required fields, but we've had requests to make it more visually obvious which fields are required on our site)

I would like to denote the input box as required with an asterisk by the label. If I do something like below, I would get a warning @intlify/vue-i18n/no-raw-text which could be safely ignored.

<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
<label for="myFormInput">{{ $t("form.form_label") }}<span>*</span></label>
<input required id="myFormInput" ... />

However, I'm not super happy with this approach since an untranslated piece of text could go unnoticed because of the ignore comment.

I think this is also possible in CSS with something like (from this StackOverflow post):

input[required]+label:after {
    content: '*';
    color: red;
}

but I was wondering if there is an agreed upon approach for this?

I realise we could also just add the asterisk to the translation itself, but I don't think that's an ideal workaround either since then all of the locales would have to be updated to include the asterisk, and missing one could be confusing to the locale.