The platform I'm working with is generating code like the one below for forms:
<div class="sf-fieldWrp">
<label for="Textbox-3">Contact Name</label>
<input type="text" value="" required="required">
<p>Your full name please</p>
</div>
I want to add an asterisk next to the labels of required fields. The only indication that a field is required in the code is required="required", without any classes or ids.
Is it feasible to place the asterisk right after the label, specifically after Contact Name?
I attempted using this CSS code, which somewhat works but positions the asterisk before the label since the label itself is a block element. I'm open to changing the label display if needed.
label { display: block }
.sf-fieldWrp { position: relative }
input[required="required"] + p::before {
content: "*";
color: red;
position: absolute;
top: 0;
left: 0;
font-size: 1.1rem;
font-style: normal;
}
Here is a preview of how it currently looks
Currently, the asterisk appears before the label text, but my goal is to have it appear after the label text (not after the label block element).
How can I ensure the label and input remain on separate lines while positioning the asterisk after the label text?