عدم کارکرد span::after

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>form-project02</title>
    <script
      src="https://kit.fontawesome.com/cac5ba1843.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      .project-title {
        margin: 100px auto;
        font-size: 20px;
      }
      .container {
        display: flex;
        justify-content: space-between;
        max-width: 700px;
        margin: auto;
        border: 1px solid #efefef;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        padding: 20px;
      }
      .img-responsive {
        display: inline-block;
        width: 100%;
        height: auto;
      }
      .right-side {
        display: flex;
        flex-basis: 50%;
        max-width: 50%;
        position: relative;
      }
      .left-side {
        display: flex;
        flex-basis: 50%;
        max-width: 50%;
      }
      .social-icon{
position: absolute;
width: 100%;
text-align: center;
      }
      .social-icon i{
font-size: 30px;
padding: 10px;
border: 1px solid #efefef;
border-radius: 5px;
margin-left: 20px;
margin-top: -8px;
transition: all 1s ease;
      }
.social-icon a:nth-child(1) i{
  color: rgb(45, 145, 220);
}
.social-icon a:nth-child(1) i:hover{
  background-color: rgb(45, 145, 220);
  color: #fff;
  border-radius: 50%;
}
.social-icon a:nth-child(2) i{
  color: rgb(238, 35, 35);
}
.social-icon a:nth-child(2) i:hover{
  background-color: rgb(238, 35, 35);
   color: #fff;
  border-radius: 50%;
}
form{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 60px;
}
form .input-group{
  position: relative;
}
form .input-group label{
 font-size: 16px;
}
form .input-group input{
 width: 100%;
 margin: 10px 0;
 height: 35px;
padding: 0 10px 0 0;
border: 1px solid #efefef;
outline: 0;
border-width: 0 0 1px 0;
}
span::after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 2px;
  color: rgb(54, 125, 219);
  bottom: 0;
transition: all 1s linear;
}
form .input-group input:focus~span::after{
  width: 100%;
}
form input[type=checkbox]{
  width: 15px;
  height: 15px;
  margin: 30px;
  vertical-align: -4px;
  position: absolute;
    top: -24px;
    right: 71px;
}
form div:nth-child(3){
  margin-top: 40px;
}
form input[type=submit]{
border: none;
margin-top: 40px;
  height: 35px;
outline: none;
  background-color: rgb(103, 240, 242);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
    </style>
  </head>
  <body>
    <p class="project-title">پروژه شماره2</p>
    <div class="container">
      <div class="right-side">
        <div class="social-icon">
          <a href="#"><i class="fa-brands fa-facebook"></i></a>
          <a href="#"><i class="fa-brands fa-google"></i></a>
        </div>
        <form action="">
          <div class="input-group">
            <label for="user-name">نام کاربری</label>
            <input
              type="text"
              name=""
              id="user-name"
              placeholder="نام کاربری..."
            />
            <span></span>
          </div>
          <div class="input-group">
            <label for="password">رمزعبور</label>
            <input
              type="password"
              name=""
              id="password"
              placeholder="رمزعبور..."
            />
            <span></span>
          </div>
          <div class="input-group">
            <label for="checkbox">مرابخاطربسپار</label>
            <input type="checkbox" name="" id="checkbox" />
            <span></span>
          </div>
          <input type="submit"  value="ورود"/>
                </form>
      </div>
      <div class="left-side">
        <img class="img-responsive" src="img/form-img.jpg" alt="" />
      </div>
    </div>
  </body>
</html>