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
@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
– hugocsl
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.
– Isac
Thanks for the tip @Isac I will read the material!
– hugocsl