Change asterisk position in label - sapui5

Question

I was reading through this website https://experience.sap.com/fiori-design-web/label/ and saw this:
So I was like "Sweet let's try it out!" and added required="true" to my label:
<Label required="true" text="E-Mail"/>
and this is what I got:
How do I bring the asterisk to the left side?
I'm using v1.81.0

Answer 1

The asterisk used to be on the left side but the new Fiori design guideline requires it to be on the right side which is implemented in UI5 since 1.73. Here is the related commit: https://github.com/SAP/openui5/commit/11544b855407af6f1025e8a855dc46701648779d.
The new design for sap.m.Label requires the asterisk
to be in the right side of the label.
The picture in the guideline page is outdated.
As the latest version of UI5 targets the latest Fiori design guidelines, I'd discourage from using any custom CSS which often leads to inconsistent UI and higher maintenance costs.

Answer 2

We faced a similar dilemma in one of our recent projects. We had no choice but to override the standard css. It is not suggested to override the standard CSS but it sure can be taken into account as a last resort.
As we wanted this property to be enabled for all the labels in the project we did override the standard CSS. You can also provide a custom class and override. Below is the css to remove the "*" from the right and place it on the left of the text.
.sapMLabelRequired:before {
content: "*";
color: #c14646;
font-family: "72", "72full", Arial, Helvetica, sans-serif;
font-size: 1rem;
font-weight: bold;
position: relative;
vertical-align: middle;
line-height: 0;
}
.sapMLabel.sapMLabelRequired .sapMLabelColonAndRequired:after {
content: "" !important;
}