HTML & CSS · Senior · Question 9 of 75
Why don't ::before and ::after work on <img> and <input>?
- 1These elements are
display: inlineby default, and pseudo-elements need a block - ✓Correct answer: They are replaced or void elements - there's no content to insert into
- 3It's a known Chromium bug; in Firefox the pseudo-elements work on them
Explanation
::before/::after are inserted inside the element, before and after its content. The content of <img>, <video>, <iframe> is replaced by an external resource, while <input> and <br> are void elements. The workaround is to wrap the element in a container and attach the pseudo-element to it. display is irrelevant: pseudo-elements work on an inline <span>.