How to display asterisk in fields with required css?

Question

I have a form with some required fields and some not. How can I automatically insert an asterisk on the label of each field with required through css?

<div class="form-group col-md-4">
        <label for="cod_produto">Código do Produto</label>
        <input type="text" class="form-control" name="cod_produto" id="cod_produto" required placeholder="Código do Produto">
    </div>
    <div class="form-group col-md-4">
        <label for="qtde_acertada">Quantidade Acertada</label>
        <input type="text" class="form-control" name="qtde_acertada" id="qtde_acertada" placeholder="Quantidade Acertada">
    </div>

Answer 1

To do with css you can add a class (in this case I chose required) the elements you want to have the asterisk, and configure that class with the pseudo element after, examples:

Before the input:

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

<div class="form-group col-md-4">
  <label for="cod_produto" class="required">Código do Produto</label>
  <input type="text" class="form-control" name="cod_produto" id="cod_produto" required placeholder="Código do Produto">
</div>
<div class="form-group col-md-4">
  <label for="qtde_acertada">Quantidade Acertada</label>
  <input type="text" class="form-control" name="qtde_acertada" id="qtde_acertada" placeholder="Quantidade Acertada">
</div>

After the input:

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

<div class="form-group col-md-4 required">
  <label for="cod_produto">Código do Produto</label>
  <input type="text" class="form-control required" name="cod_produto" id="cod_produto" required placeholder="Código do Produto">
</div>
<div class="form-group col-md-4">
  <label for="qtde_acertada">Quantidade Acertada</label>
  <input type="text" class="form-control" name="qtde_acertada" id="qtde_acertada" placeholder="Quantidade Acertada">
</div>