我怎么能 select the sibling::after pseudo element when input:focus

Question

I want to make a simple input that when you focus on it a nice border appears from the bottom center of it with some transition:

    <form method="POST" action="/admin/add-product" class="add-product">
        <div class="form-input">
            <label for="title">title</label>
            <input type="text" name="title" id="title" placeholder="title">
        </div>
        <button className="btn btn-green">Add product</button>
    </form>

\* some basic styling for the form *\
.add-product {
  width: 500px;
  max-width: 95%;
  margin: 3rem auto;
  padding: 2rem;
}
\* .form-input contains the input and the label *\
.form-input {
  width: 100%;
  position: relative;
}
.form-input input,
.form-input label {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.form-input input {
  height: 2rem;
  background: transparent;
  border: transparent;
}

\* the ::after *\
.form-input::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0%;
  background-color: var(--green);
  transition: width 0.6s;
}


\* this where I think I made a mistake these changes are not applied to ::after at :focus *\
.form-input input:focus + ::after {
  width: 100%;
}

I expected to see the::after element's width to change but it doesn't so I think there is a mistake in selecting this way.form-input input:focus +::after; even though I think there is no

Answer 1

CSS does have a :focus-within pseudo class solution for this:

.form-input:focus-within::after { width: 100%; }

It's supported in all major browsers .

Answer 2

.form-input::after matches the pseudo-element that appears after the content of any .form-input element.

.form-input input:focus + ::after matches the pseudo-element that appears after the content of the next sibling of any focused input that is a descendant of .form-input .

Unless you have HTML like:

<div class="form-input">
    <input>
    <div class="form-input"></div>
</div>

… that isn't going to match anything.

You can't select the parent element's ::after based on the focus state of a child element. CSS doesn't have a parent selector .

You'd need to use JS for this.