border radius is zero when use after psoudo element

Question

i user bootstrap form , i want to insert * after any input (in invalid input with red color and in valid input with green color)
i have to use <span> tag after any input to show *
but when i use <span> and ::after pseudo element input border radius is 0 but i want to no change border radius .

input:invalid+span::after {
  content: "*";
  font-size: large;
  color: red;
}

input:valid+span::after {
  content: "*";
  font-size: large;
}




   <div class="col-md-6 col-lg-4">
       <div class="input-group mb-2">
            <span class="input-group-text">
                <i class="fa fa-user"></i>
            </span>
            <input required type="number" class="form-control"><span></span>
       </div>
   </div>

MyCode: CodeLink

Answer 1

by this styles it worked

input:invalid+span::after {
  content: "*";
  font-size: large;
  color: red;
}

input:valid+span::after {
  content: "*";
  font-size: large;
  color: green;
}


.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}