Styling validation error messages using HTML/CSS

Question

Im trying to customize a validation error message as part of a CSS/HTML challenge, so I am unable to use JavaScript on it. Basically I need it to look like this image

My code is as follows.
HTML

  <p> It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
  <form action="php">
    <div class="info">
      <input type="email"
             placeholder="Enter Email Adress Here"
             required enter code hereoninvalid="this.setCustomValidity('Please enter a valid email address')"
             onvalid="this.setCustomValidity('')">
      <button type="submit">Get Started For Free</button>
    </div>
  </form>
</div>

And CSS

.sign input{
    border-radius: 25px;
    width: 500px;
    height: 45px;
    text-align: center;
    margin-right: 30px;
}

Still very new to coding so help is much appreciated:)

Answer 1

You can try and add the validation message in a CSS pseudo element (:before /:after) and style it relatively to the input.

input {
  position : relative 
}
    
input::after{ 
      content: "Your validation message"
      position: absolute;
      bottom: -8px;
      //add any top, left, right, bottom css styles to it to get the desired position
    }