I'm struggling to understand why an ::after element is not displaying on an input element, but is working fine on a div.
I'm attempting to create a performance-friendly focus effect for an input element, where it glows when in focus using the after pseudo-element.
Here's my code:
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;
}
Here's how it looks:
https://i.stack.imgur.com/A503F.png
When inspecting the ::after element for the div, it appears on the screen even without dimensions specified. However, for the input element, it exists in the DOM but doesn't show up visually when selected.
What could be causing this issue?