::after pseudo element not displaying after an input element

Question

I was having trouble displaying an ::after pseudo element after an input field in a form I was creating. I was hoping that someone could clarify what I'm doing wrong. I will admit I don't have a lot of experience with the ::after/::before pseudo elements. I am trying to get the password::after pseudo element to appear below the password input field, but it doesn't display.

Thanks for your time.

-Hendrik

/* Form */
div[class^="form-row"] {
  display: flex;
  gap: 60px;
}
.form-flex-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.form-flex-container:last-child {
  margin-bottom: 0px;
}

.form-row-3 {
  margin-bottom: 50px;
}

input {
  width: 220px;
  height: 22px;
  border-radius: 3px;
  font-size: 13px;

  border: 1px solid #e5e7eb;
}


input:focus {
  outline: 1px solid #088656;

  border: 1px solid white;
  box-shadow: 3px 3px 5px #bebebe;
}
input:invalid {
  outline: 1px solid rgb(252, 55, 55);
  border: 1px solid white;
}
.password-invalid {
  outline: 1px solid rgb(252, 55, 55);
  border: 1px solid white;
}
#password {
  position: relative;
}
#password::after {
  content: "* Passwords do not match";
  color: rgb(252, 55, 55);
  display: block;
  width: 10px;
  height: 10px;
  position: relative;
  top: 20px;
}

label {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #314158;
  margin-bottom: 4px;
}

    <form>
        
          <div class="form-row-1" id="form-row-1">
            <div class="form-flex-container">
              <label for="first-name">First Name</label>
              <input type="text" name="first-name" id="first-name" />
            </div>
            <div class="form-flex-container">
              <label for="last-name">Last Name</label>
              <input type="text" name="last-name" id="last-name" />
            </div>
          </div>
          <div class="form-row-2">
          <div class="form-flex-container">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" />
            </div>
            <div class="form-flex-container">
            <label for="phone-number">Phone Number</label>
            <input type="tel" name="phone-number" id="phone-number"  pattern="[0-9]{1}[0-9]{3}[0-9]{3}[0-9]{4}|[0-9]{3}[0-9]{3}[0-9]{4}|[0-9]{1}-[0-9]{3}-[0-9]{3}-[0-9]{4}|[0-9]{3}-[0-9]{3}-[0-9]{4}">
          </div>
        </div>
          <div class="form-row-3">
        <div class="form-flex-container">
            <label for="password">Password</label>
            <input type="password" name="password" id="password"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
          </div>
          <div class="form-flex-container">
            <label for="confirm-password">Confirm Password</label>
            <input type="password" name="confirm-password" id="confirm-password"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
          </div>
          </div>

Answer 1

You cannot have a pseudo after element on an input element.

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as img, or to br elements.

From : MDN

Look into using label elements perhaps.