Pseudo elements ::after and ::before work on which input types

Question

I wonder if there is any documentation or article that says where exactly we can use ::after and ::before

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

But the tag <input> is also a Void Element, however for certain types the ::after and ::before work! I know that in the <label> 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/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 really fast just to show what I’m talking about. Note that there seems to be no 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 any explanation?

Answer 1

Pseudo elements ::after and ::before do not work on replaced element (definition). These elements are defined as those outside the scope of CSS, such as img, iframes, video, hr, br, embed and input.

The reason for this is that the content inserted as before or after is treated as a child, not as a sibling of the original content. The replaced elements do not have any content in the DOM tree and therefore cannot receive any kind of child.

The issue of inputs is more difficult. Inputs with type image are replaced. Chrome accepts for some types of input (checkbox, radio, color, file, date, datetime-local, Month, range, time, week), but this behavior is not consistent between browsers, not working in Firefox, for example. Day-to-day is best, at least for now, to include inputs in the list of elements that do not receive before or after.

To MDN documentation on before explains that subtypes or "replaced Elements" do not accept this tag and that the input tag is sometimes considered "replaced" (outside the scope of CSS). There are those who argue that all inputs should be treated as replaced, only type="image" or none of them (this article discusses the theme). Lea Verou (dealing with another issue) states that one should not rely on pseudo-elements in replaced elements, notably input with type="checkbox" because although it works, it is not specified.