CSS :after not adding content to certain elements

by

img and input are both replaced elements.

A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.

:before and :after only work with non-replaced elements.

From the spec:

Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.

With span:before, span:after, the DOM looks like this:

<span><before></before>Content of span<after></after></span>

Evidently, that won’t work with <img src="" />.

More Related Contents:

  1. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  2. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. Why do the :before and :after pseudo-elements require a ‘content’ property?
  5. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  6. What is the difference between a pseudo-class and a pseudo-element in CSS?
  7. Font Awesome 5, why is CSS content not showing?
  8. Can I change the height of an image in CSS :before/:after pseudo-elements?
  9. Is there a way to use SVG as content in a pseudo element ::before or ::after
  10. Can I target a :before or :after pseudo-element with a sibling combinator?
  11. Should I use single or double colon notation for pseudo-elements?
  12. How can I make generated content selectable?
  13. Universal selector * and pseudo elements
  14. Can I have multiple :before pseudo-elements for the same element?
  15. Combine :after with :hover
  16. Z-index with before pseudo-element
  17. ::before pseudo-element stacking order issue
  18. CSS Pseudo Element Counters: can you increment an alphabet letter “a”, “b”, “c”, etc instead of a number?
  19. CSS3 ::selection behaves differently in FF & Chrome
  20. Vertically centering content of :before/:after pseudo-elements
  21. Nesting pseudo-elements inside pseudo-elements
  22. “text-decoration” and the “:after” pseudo-element, revisited
  23. css rotate a pseudo :after or :before content:”” [duplicate]
  24. Change style of pseudo elements in angular2
  25. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  26. prevent a pseudo element from triggering hover?
  27. Purpose of *:before, *:after rule without content property
  28. Apply webkit scrollbar style to specified element
  29. CSS3 transitions on pseudo-elements (:after, :before) not working?
  30. Combine CSS Attribute and Pseudo-Element Selectors?

Leave a Comment