Adding an asterisk BEFORE the colon on a required form label

Question

I am trying to make a form which has some required fields, and I want to add an asterisk on the labels for the required input fields. The problem I'm having is that I can't find a way to make it so that the asterisk comes BEFORE the colon, and not after. It needs to look like this:

But right now it looks like this:

This is my html:

<li class="form-row">
  <label class="required" for="first-name">First Name:</label>
  <input type="text" placeholder="John" required/>
</li> 

And my CSS for how I originally tried to solve this issue:

.required:after {
   content: "*"
 }

Answer 1

Assuming you can modify the HTML, you can just insert a <span> tag around the colon, and then use the target .required span:before :

 .required span:before { content: "*" } 

 <li class="form-row"> <label class="required" for="first-name">First Name<span>:</span></label> <input type="text" placeholder="John" required/> </li> 

Answer 2

 .firstName span:before { content: "*"; color: red; } 

 <label class='firstName' for='first-name'> First Name<span>:</span> </label> <input type='text' placeholder='required' /> 

Answer 3

You can try like below:

 .required:after { content: "* :"; display:inline-block; background:#fff; margin-left:-4px; } 

 <label class="required" for="first-name">First Name:</label> <input type="text" placeholder="John" required/> 

Answer 4

Since this is already somewhat style-abuse to produce content, why not make the ":" part of the style too?

 label::after { content: ":"; } label.required::after { content: "*:"; } 

 <label class="required" for="first-name">First Name</label><br> <label for="first-name">Last Name</label> 

Also, note that ::after is supposed to have two colons.