UX - CSS Pseudo Selectors - Indicate Required and More!

One thing that irks me is submitting a form that isn't complete and not having an indication of what is missing until after attempted submission.

We could color all the labels differently than the non-required, but I really wanted an asterisk in red to use just a little bit of contrast that is more relaxing to the user's eyes.

What can I say; I'm an Innovator...

Here is the result of styling individual labels using sudo selector ::after

...and here is a sample for various components that I put in the "Form Body" CSS:

/* dropdown select label selector */

.sys_fn_type .aras-field__label::after,

/* calendar label selector */

.sys_fn_pr_found_date .sys_f_label::after,

/* textarea label selector */

.sys_fn_pr_description .sys_f_label::after,

/* checkbox label selector */

.sys_fn_rc_investigation_required .sys_f_label::after {

    content: " *";

    color: red;


Hope that helps somebody. I think it looks great. The non-required fields are apparent now (I didn't screen shot the entire form) and the required fields are evident at a glance.

Lastly, I should mention that using pseudo selectors ALWAYS requires a "content" attribute - even if it is an empty string - or it won't show.

EDIT: Well, we need to tell the user what it means just incase they are from another planet, so I'll use ::after again, but on the whole div of my last element:

.sys_fn_prob_res_act_disposition::after {
    content: "* indicates required fields";
    color: red;
    display: inline-block;
    margin-top: 1.5em;
    text-align: right;
    /* I couldn't achieve the placement result I wanted with right padding or margin, so I had to use width percentage */
    width: 96%;


BONUS: See the light grey line (#ddd) above "Project Discovered"? That's using the pseudo selector ::before!