Why is the + selector not working with pseudo-class :focus?

Question

I'm using the + selector in CSS with then pseudo-class :focus.

Code:

.main__form__input {
  margin: 1.6rem 0;
  display: block;
  position: relative;
}

.main__form__input__before,
.main__form__input__after {
  height: .3rem;
  position: absolute;
  bottom: 1rem;
  left: 0;
}

.main__form__input__before {
  background-color: #adadad;
  width: 100%;
  z-index: 0;
}

.main__form__input__after {
  background-color: #000;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-in-out;
  z-index: 1;
}

.main__form__input__field:hover+.main__form__input__after {
  transform: scaleX(1);
}

.main__form__input__field {
  width: 100%;
  border: none;
  padding: 1em;
}

.main__form__input__field,
.main__form__input__field::placeholder {
  font-size: 2.4rem;
  font-weight: 400;
  font-family: Lato, sans-serif;
}

.main__form__input__field:focus,
.main__form__input__field:focus-visible {
  outline: none;
}

<div class="main__form__input"><input type="text" class="main__form__input__field" placeholder="What is your best friend's name?">
  <div class="main__form__input__before"></div>
  <div class="main__form__input__after"></div>
</div>

My Aim:

Whenever the user clicks on the input field, I want the .main__form__input__after class go from transform: translateX(0) to transform: translateX(1)

It will provide an animation such that whenever the user clicks on the input field, the border below it (which is actually a div) will go from grey to black.

---

Thank You!