Automatically placing an asterisk after a required field by Css

If you want to place an asterisk sign in all required fields in a form we can use Css to complete this work. By using CSS we can place an asterisk sign after the mandatory fields label. We also can design this asterisk sign as our desired design. This CSS operation worked automatically by placing asterisk sign in required field according a common class.

In our bellow example i place asterisk sign after every required fields label content in my html forms. And color this required asterisk symbol color Red according class “required”.
The html content where we want to place an asterisk sign.

<div class="input text required">
<label for="UserUsername">Email</label>
<input type="text" required="required" id="UserUsername" maxlength="60" placeholder="Email" class="form-control" name="data[User][username]">
</div>

Image may be NSFW.
Clik here to view.
The css by which we replace asterisk after label content.

.required label:after {
	color: #ff0000;
	content: " *";
	font-size: 22px;
	position: relative;
	top: 9px;
}