how can i 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

Maybe stop invalidating your CSS by using wrong comment syntax, that could be a start … And if that’s not it, then provide a proper [mre], please. We need to see your HTML as well, showing CSS on its own is rather pointless for the most part. — misorude, Sep 12 '19 at 10:23

connexo · Answer 1 · 2022-02-26T07:44:27.073

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.

edited Feb 26 '22 at 07:44

answered Feb 26 '22 at 07:37

connexo

53,704
14
91
128

score -1 · Accepted Answer · answered Sep 12 '19 at 10:24

-1

.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.

answered Sep 12 '19 at 10:24

Quentin

914,110
126
1,211
1,335

I see thank you very much i replaced the ::after element with a div in the html and it worked. thank you again – AyoubTrd Sep 12 '19 at 12:02
*You can't select the parent element's ::after based on the focus state of a child element.* **Wrong.** CSS does (and did back in 2019 when you answered) have the `:focus-within` pseudo class. No need for JS here unless you need to support zombie browsers like IE 11. – connexo Feb 26 '22 at 07:39

how can i select the sibling ::after pseudo element when input:focus

2 Answers2