CSS for after content

September 9, 2023

I created a user input field which is mandatory to fill. As a part of this, I wanted to add a star (as it is a common practice) to let the user know that the field is required to be filled. I used the shadow command to add the star. However, the stars do not align with the text as I believe there is no reference point for them. I am attaching part of the HTML and CSS below. I do not understand how to provide them with a reference point without disturbing my existing structure. Also, is the use of shadow element is how it is usually done?

.feedback-data form {
  position: relative;
  top: 12rem;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}

.name-form {
  display: flex;
  gap: 1rem;
}

.name-form .data-form {
  flex: 1;
}

.data-form {
  display: flex;
  flex-flow: column-reverse nowrap;
  gap: 1.5rem;
}


.required::before {
  position: absolute;
  content: '*'; 
  color: red;
  margin-right: 4px; 
}

<div class="feedback-data">
  <form action="" method="post">
    <div class="name-form">
      <div class="data-form  required">
        <input type="text" id="firstName" required>
        <label for="firstName">First Name</label>
      </div>
      <div class="data-form required">
        <input type="text" id="lastName" required>
        <label for="lastName">Last Name</label>
      </div>
    </div>
  </form>
</div>

>Solution :

Heres two samples you can play with. I am not sure if this is what you mean. Basically just put a negative margin on the star on the first examble and usually i put it after the label when I am indicating required. Let me know if this helps

.feedback-data form {
  position: relative;
  top: 12rem;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}

.name-form {
  display: flex;
  gap: 1rem;
}

.name-form .data-form {
  flex: 1;
}

.data-form {
  display: flex;
  flex-flow: column-reverse nowrap;
  gap: 1.5rem;
}


.required::before {
  position: absolute;
  content: '*'; 
  color: red;
  margin-left: -10px;
}


/** star by the label **/

label.star::after {
  position: absolute;
  content: '*'; 
  color: red;
  
}

<div class="feedback-data">
  <form action="" method="post">
  <h2>SAMPLE 1 is with -margin</h2>
    <div class="name-form">
      <div class="data-form  required">
        <input type="text" id="firstName" required>
        <label for="firstName">First Name</label>
      </div>
      <div class="data-form required">
        <input type="text" id="lastName" required>
        <label for="lastName">Last Name</label>
      </div>
    </div>
  </form>
</div>

<br>
<br>
<br>



<div class="feedback-data">
  <form action="" method="post">
  <h2>SAMPLE 2 by the label</h2>
    <div class="name-form">
      <div class="data-form  required">
        <input type="text" id="firstName" required>
        <label class="star" for="firstName">First Name</label>
      </div>
      <div class="data-form required">
        <input type="text" id="lastName" required>
        <label class="star" for="lastName">Last Name</label>
      </div>
    </div>
  </form>
</div>