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.

You can read more about content property here.

Share on Facebook

Tweet

Follow us

Save