Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Saqib Ishfaq
13,912 PointsPseudo-elements do not work with images and form elements. ???
Pseudo-elements do not work with images and form elements. Replaced elements like input or img have no content, so we shouldn't be able to use generated content for them (source). and in the video he just created an image icon :/
Saqib Ishfaq
13,912 PointsIn the teachers note of the video it said that pseudo elements don't work with images and form elements, but in video he just appended an image icon! was reading through some other articles relating this , i think wording was confusing what it probably meant was, that we cant append another image on an image element, or cant append input element on an input element, provided the fact that they have no content inside them on their own except attributes. that's what i have gathered so far, if i am correct?
Saqib Ishfaq
13,912 Pointsyeh i kind of got what you meant there:) and thanks for explaination about the topic helped alot!
1 Answer
Zack Lee
Courses Plus Student 17,662 Pointsyou can click on the links attached to the teachers notes to get more information about whats being mentioned. this might help clear up whats being said.
after re-reading its clear you can't used ::pseudo-elements on elements that don't have content, or as they put it "replaced content," which just means the tag itself has no content but is replaced by some specified content, i.e. an image or a form field.
what they're saying is, because these elements don't technically have content, you can't use a pseudo-element because they depend on appending content before and after given content.
does that make sense? <img> <form> <br> ... (see techer note links for more complete list) all of these element technically don't have content, or something is put in its place which has content. so ::before and ::after can't be used on them because they require some content as a reference to know where to place their "pseudo-content."
Saqib Ishfaq
13,912 Pointsyeh i read those attached links in detail, kind of understood now! so does it mean we can infact append an image as a "generated content" as long as its not on another image element or <form>?
Zack Lee
Courses Plus Student 17,662 Pointsyes exactly. you can use a image in generated content, but it cant be attached to an <img> tag element because of the aforementioned issues.
also I updated a typo which said you "can" use pseudo-elements when I really meant you "can't"
Zack Lee
Courses Plus Student 17,662 PointsZack Lee
Courses Plus Student 17,662 PointsI'm confused by what you're asking? you can insert images in the content property as a url(...img). the :before and :after pseudo-elements generate content before and after a specified element, not in place of that element.