When label is used with asterisk in input field, when it's text is large it's over laying-CodePudding

I've created a form element which has basic input field with label that should be required. So I've added asterisk.
And when the text is large it should break to multiple lines. But the problem what I see when the text breaks to multiple lines is I see the text above asterisk.

I want to avoid this. I want asterisk to be placed in front of all the lines.
How can I do that? Please find the code

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Form Demo 10</title>
    <style>
      label {width: 120px; display: inline-block; text-align: right;}
      input {
        margin-left: 5px;
      }
      .req-field {
         color: red
      }
    </style>
  </head>

  <body>

    <h1 style="text-align: center">Contact Details</h1>

    <form style="width: 460px; margin: auto; border: solid 1px; padding: 0 1em;" method="post" action="">
      <p>Please enter your personal details:</p>
      <p>
         <label for="fname">First nameeeeeeeeee:<span >*</span> </label>
         <input type="text" size="15" accesskey="F" id="fname" name="fname" required />
      </p>
      <p>
        <label for="lname">Last name:<span >*</span> </label>
        <input type="text" size="15" accesskey="L" id="lname" name="lname" required />
      </p>
      <p style="text-align: center;"><small>Fields marked * are required.</small></p>
      <p style="text-align: center;"><button type="submit" accesskey="S"><span >S</span>ubmit</button></p>
    </form>

  </body>
</html>

CodePudding user response：

Consider using text-align: left when styling the label:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Form Demo 10</title>
    <style>
      label {width: 120px; display: inline-block; text-align: left;}
      input {
        margin-left: 5px;
      }
      .req-field {
         color: red
      }
    </style>
  </head>

  <body>

    <h1 style="text-align: center">Contact Details</h1>

    <form style="width: 460px; margin: auto; border: solid 1px; padding: 0 1em;" method="post" action="">
      <p>Please enter your personal details:</p>
      <p>
         <label for="fname">First nameeeeeeeeee:<span >*</span> </label>
         <input type="text" size="15" accesskey="F" id="fname" name="fname" required />
      </p>
      <p>
        <label for="lname">Last name:<span >*</span> </label>
        <input type="text" size="15" accesskey="L" id="lname" name="lname" required />
      </p>
      <p style="text-align: center;"><small>Fields marked * are required.</small></p>
      <p style="text-align: center;"><button type="submit" accesskey="S"><span >S</span>ubmit</button></p>
    </form>

  </body>
</html>

This alternative method uses :after pseudo-element to control the positioning of the asterisk:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Form Demo 10</title>
    <style>
      label {width: 120px; display: inline-block; text-align: right; position: relative;}
      label:after {
        content: '*';
        color: red;
        position: absolute;
        right: -8px;
      }
      input {
        margin-left: 5px;
      }
    </style>
  </head>

  <body>

    <h1 style="text-align: center">Contact Details</h1>

    <form style="width: 460px; margin: auto; border: solid 1px; padding: 0 1em;" method="post" action="">
      <p>Please enter your personal details:</p>
      <p>
         <label for="fname">First nameeeeeeeeee:</label>
         <input type="text" size="15" accesskey="F" id="fname" name="fname" required />
      </p>
      <p>
        <label for="lname">Last name:</label>
        <input type="text" size="15" accesskey="L" id="lname" name="lname" required />
      </p>
      <p style="text-align: center;"><small>Fields marked * are required.</small></p>
      <p style="text-align: center;"><button type="submit" accesskey="S"><span >S</span>ubmit</button></p>
    </form>

  </body>
</html>