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

Asked

Viewed 3,245 times

12

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?

  • I think this depends a lot on the implementation of the browser and not the HTML itself.

  • @Sveen think that if it were for the browser would have after working on IE and not on Chrome for example, then if it is a limitation of the browser they all have exactly the same limitation, something even rare to see... But when I researched at the time it seems that the after does not take elements that have no closing tag, but either works, perhaps by the CSS of the User agent, or some input pattern determined by w3c... Will know rss

  • 1

    Purely in an optic of contributing to the question, is here the official documentation of W3 in the aforementioned pseudo selectors. Interestingly the documentation is very small, half vague and does not mention types of elements affected. Judging by this answer Soen seems to be related to the fact that some elements cannot have text as content.

  • Thanks for the tip @Isac I will read the material!

1 answer

4

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.

  • 1

    "may not work, depending on the context" what context? pq I do not know pq works on checkbox and not in the text If possible create a different example from the ones I already cite in the question, like putting a ::after straight on a tag input of the kind text would be great. I did the test and even putting display:block, height and width in a text box could not make the after be recognized... The links you quoted explain what a replaced element. and what is before and after, but does not say pq does not work in an inpunts and works in others...

  • Interestingly, despite the documentation stating that img and input with type image do not receive after and before, Chrome displays the after when the image is not found. The word context got really bad. Not obtuse, the rules explain why it works on some and not on others. It works on elements that are not replaced. Inputs are sometimes considered replaced. I will adjust the answer to suit the question better.

  • I still can’t understand why text and textarea don’t display before and after. I believe that the reason why type image does not display is clear enough. So is the button. before and after are part of the element and if the rendering of the element content is not under CSS control, then there is no place for before or after.

  • The specification is still kind of "obscure", although not precise now got better.

  • It’s... I think so too. It seems that this topic is still under discussion. There are proposals to create new pseudo-elements to achieve the goal of inserting content before and after replaced Elements. In fact I was surprised that the other browsers do not support before in checkboxes, since at least to me it seems to be very useful. It seems to me that Chrome’s approach of treating some types of input as not replaced seems correct. I just don’t understand why they don’t include text inputs in this list.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.