Easy and smart way to add “required” css class to form field labels

Easy and smart way to add “required” css class to form field labels

Undoubtedly, this is the easiest way to add a red asterisk (*) sign to a required field label in a form.

Here’s HTML part of the form.

<div class="required"><label for="FirstName">First Name</label>
<input name="first_name" maxlength="50" type="text" id="FirstName"></div>

<div class="required"><label for="LastName">Last Name</label>
<input name="last_name" maxlength="50" type="text" id="LastName"></div>


And here’s the CSS part

form .required label:after {
	color: #e32;
	content: '*';
	display:inline;
	font-weight: bold;
}

Obviously “content” is the property that adds a string (i.e. *) after label.

Easy and smart way to add “required” css class to form field labels

You can read more about content property here.

Leave a Reply

Your email address will not be published.