Assessment wanted for Advanced form styling 1 skill test. Task-3.

Task-3.

by EiNzp

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Advanced styling: Task 3</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>

  <body>
    <form>
      <fieldset>
        <legend>Feedback form</legend>

        <p>Required fields are labelled with "required".</p>
        <div>
          <label for="fname">First name: </label>
          <input id="fname" name="fname" type="text" required>
          <span></span>
        </div>
        <div>
          <label for="lname">Last name: </label>
          <input id="lname" name="lname" type="text" required>
          <span></span>
        </div>
        <div>
          <label for="email">Email address: </label>
          <input id="email" name="email" type="email">
          <span></span>
        </div>
        <div><button>Submit</button></div>
      </fieldset>
    </form>
  </body>

</html>

CSS

body {
    background-color: #fff;
    color: #333;
    font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 1em;
    margin: 0;
}

* {
    box-sizing: border-box;
}

button,
input,
select {
    font-family: inherit;
    font-size: 100%;
    padding: 0;
    margin: 0;
}

fieldset {
    padding: 10px 30px 0;
    width: 400px;
}

legend {
    color: white;
    background: black;
    padding: 5px 10px;
}

fieldset>div {
    margin-bottom: 20px;
    display: flex;
    flex-flow: row wrap;
}

button,
label,
input {
    display: block;
    font-family: inherit;
    font-size: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    height: 30px;
}

input {
    box-shadow: inset 1px 1px 3px #ccc;
    border-radius: 5px;
}

input:hover,
input:focus {
    background-color: #eee;
}

button {
    width: 60%;
    margin: 0 auto;
}

/* my code */
/*1*/
input+span{
    position: relative;
}

input:required + span::after{
    font-size: 0.7rem;
    position: absolute;
    content: 'required';
    color: yellow;
    background-color: black;
    border-radius: 5px;
    padding: 5px 10px;
    top: -26px;
    left: -59px;
}

/*2*/

input+span::before{
    position: absolute;
    right: -20px;
    top: 4px;
}

input:valid{
    border: 2px solid green;
}

input:valid+span::before{
    content: '✓';
    color: green;
}

input:invalid{
    border: 2px solid red;
}

input:invalid+span::before{
    content: '✖';
    color: red;
}