Why can't i use ::after ::before with <input/> ?? [Replaced elements]

 Well, i have hacked NASA with <html/> but what the f**k are replaced elements?

ishu.dev who are you

Replaced elements are outsiders, who are out of scope of CSS means they're elements whose contents are not affected by the current document's styles.

The only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box. See Controlling object position within the content box for further information.
(ref : https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)

 

HTML
<input type="text"/>

CSS
input::after{
  content:"$ icon maybe"
}

Output

output

Typical replaced elements are:

  • <iframe>

  • <video>

  • <embed>

  • <img>

Some elements are treated as replaced elements only in specific cases:

  • <option>

  • <audio>

  • <canvas>

  • <object>

  • <input>

 

for more compatibility ref: go to https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element