Добавление звездочек для обязательных полей с помощью CSS

Для обозначения обязательных полей формы, очень часто используют обозначения в виде звёздочки. Что в свою очередь намекает, на важность заполнения данного поля перед отправлением формы на сервер.

По этому, очень часто программисты добавляют в свой HTML код звёздочку для обязательных к заполнению полей в таком виде:

<div class="form-group">
  <label class="control-label" for="username">Username</label><span class="required">*</span>
  <input type="text" name="username" required="required" class="form-control">
</div>

Также для выделения звёздочки поменяем ей цвет на красный:

.required
{
    color: red;
}

Данный способ очень не удобен тем, что он относительно громоздкий и не совсем удобный для использования.

Вот по этому знающие программисты используют совсем иной подход с применениям CSS стиля.

<div class="form-group">
    <label class="control-label required" for="username">Username</label>
    <input type="text" name="username" required="required" class="form-control">
</div>

С помощью CSS мы ищем все label с классам required и добавляем псевдоэлемент :after чтобы добавить звёздочку и красный цвет для неё.

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