ML-CSS如何在表格标签前使用标签文本正确对齐“所需”星号？

Question

I am adding a 'required' asterisk before a Bootstrap form label as following

The generated html bootstrap_form is the following

    <div class="form-group-default input-group input-group-attached col-sm-12">
          <div class="form-group">
        <label class="required control-label" for="user_email">Adresse courriel</label>
        <input class="form-control form-control" type="email" value="" name="user[email]" id="user_email">
          </div>
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Réinitialiser" class="btn btn-success btn-cons bold all-caps">
          </span>
    </div>

and my CSS entry is :

    label.control-label.required:before {
      color: red;
      content: "*";
      padding-top: 10px;
      font-size: 20px;
      font-family: arial;
    }

I tried using padding-top to lower the asterisk at le level of the label text , bit now way ... how can I align it better ?

thanks for suggestions

Answer 1

You should be able to control the position of the asterisk with position:relative and top:...px .

Something like :

label.control-label.required:before {
  color: red;
  content: "*";
  font-size: 20px;
  position:relative;
  top:6px;
  font-family: arial;
}

Have a look at the Fiddle .

Answer 2

Try removing padding and add float:

<style>
   label.control-label.required:before {
      color: red;
      content: "*";
      float:left;
      position:relative;
      font-size: 20px;
      font-family: arial;
    }
</style>