React - Pseudo element on Input not rendered at all

Question

I am beating my head here over why an ::after element is not rendered at all when being on input element, but on some div it renders just fine.

I am trying to make a performance friendly focus effect on an input element, so when it's in focus, it gets a nice glow from the after element.

Here's what I have

return (
  <div className="App">
    <input placeholder="Username"></input>
    <div className="divider"></div>
  </div>
)

and the css

input,
.divider {
  width: 300px;
  height: 40px;
  position: relative;
}

input::after,
.divider::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 16px 3px #61DAFB;
}

and here's the final product

When inspecting the ::after element for the div, it is right there in the screen, event if I remove its dimensions, but for the input element, it's in the DOM, but when you select it it's nowhere in sight.

Why is that?

@pwolaq I was only searching for React related stuff, because I thought the problem was specific for react. — Sartheris Stormhammer, Mar 31 '19 at 21:33
Also it's kind of confusing what is a container and what isnt considering how React forces you to write every html element with a closing tag — Sartheris Stormhammer, Mar 31 '19 at 21:35
this is not 100% right, you can use the short syntax. Like XHTML does. You don't need closing tag, but you need to close it, like XHTML does. — golddragon007, Mar 31 '19 at 21:50

score 1 · Accepted Answer · answered Mar 31 '19 at 21:31

1

:before and :after render inside a container and can not contain other elements.

Please view specs: https://www.w3.org/TR/CSS2/generate.html#before-after-content

answered Mar 31 '19 at 21:31

golddragon007

1,247
14
27

React - Pseudo element on Input not rendered at all

1 Answers1