The pseudo elements:after and: before work on which input types

I would like to know if there is any documentation or article that says where exactly we can use ::after and ::before

I have seen that in the tag <img> for example does not work. I believe it does not work because <img> is an element of type Void Element (element that does not have a closing tag).

But the tag <input> it is also a Void Element, however for certain types o:: after and:: before work! I know that in <label> it works and that jQuery can everything, but that's not the answer I want.

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
div {
   padding: 25px;
}
::after {
  color: #fff;
  background: blue;
  top: 20px;
  position: relative;
  width: 10px;
  height: 10px;
}
#teste-button::after{
  content: 'after button';
}
#teste-text::after{
  content: 'after text';
}
#teste-radio::after{
  content: 'after radio';
}
#teste-checkbox::after{
  content: 'after checkbox';
}
#teste-password::after{
  content: 'after password';
}
#teste-submit::after{
  content: 'after submit';
}
#teste-range::after{
  content: 'after range';
}
#teste-file::after{
  content: 'after file';
}
#teste-textarea::after{
  content: 'after textarea';
}
#teste-btn::after{
  content: 'after btn';
}
#teste-img::after{
  content: 'after img';
}
#teste-legend::after{
  content: 'after legend';
}
#teste-label::after{
  content: 'after label';
}
#teste-img2::after{
  content: 'after type img';
}

<div><input type="button" value="input button" id="teste-button" /></div>

<div><input type="text" value="type text" id="teste-text" /></div>

<div><input type="radio" value="teste" id="teste-radio" /></div>

<div><input type="checkbox" value="teste" id="teste-checkbox" /></div>

<div><input type="password" value="teste" id="teste-password" /></div>

<div><input type="submit" value="submit" id="teste-submit" /></div>

<div><input type="range" value="teste" id="teste-range" /></div>

<div><input type="file" name="file" placeholder="Arquivo" id="teste-file" /></div>

<div><textarea rows="2" cols="10" id="teste-range">textarea</textarea></div>

<div><button type="button" id="teste-btn">button</button></div>

<div><input type="image" alt="Login" id="teste-img2" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">input type="image" </div>

<div><img src='sem-img.jpg' id="teste-img" alt='img quebrada'/></div>

<div><img src='https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' id="teste-img" alt='img ok' style="width: 150px; height:auto"/>imagem ok</div>

<div><legend id="teste-legend">Legend</legend></div>

<div><label for="radio" id="teste-label">Label</label></div>

I made this code quickly just to show what I'm talking about. Notice that you don't seem to have an explanation where it works or not.

I tried to find a correct application list of these pseudo elements, but nothing very certain... Does anyone have an explanation?