Why don't :before and :after pseudo elements work with `img` elements? [duplicate]

Question

I am trying to use a :before pseudo element with an img element.

Consider this HTML and CSS...

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle.

This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a div or span element.

Why not?

Is there a way to make pseudo elements work with img elements?

Kailyard

I wrote this (not fantastic) answer that's relevant: #6949648 – Strategy

Answer 1

The spec says...

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.

I guess this means they don't work with img elements (for now).

Also see this answer.

Kailyard

This will be defined in more detail in a future specification. Ahem "PUNT!" – Ypres

The real SOer should ask a question and 3 minutes after answer to himself, +1 ;-) – Thallium

It's the future, still no specs... – Redshank

It's the future again, still no specs? – Delanty

@Delanty Maybe we should write it and submit it the W3C. – Kailyard

The abandoned CSS3 Generated Content module, which was last updated 10 years ago, says "Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box." So presumably this has been accounted for already, except this module was never implemented and is currently still pending a rewrite. – Everlasting

Again! Future! What's going on? – Baseboard

Sure would be useful right about now – Concordant

4 years into the future and still waiting! – Statuesque

THIS iS 2016...this is why mobile native apps will win. – Lieu

Its 2016 And still waiting!!! – Hanes

2017 here, same. – Colocynth

mid 2017 here, still no specs... – Midvictorian

Almost 2018, still no specs. – Glib

2018.. still counting – Grison

Le sigh Still waiting in 2018... BibleThump – Forb

Still the future....... – Testosterone

It's 2019, and 8 years passed. When will we reach the future exactly? – Rickettsia

Does the future exist? – Usn

Future does not exist yet – Egoist

Still waiting for the future to exist. Did we all die already? – Debase

Have someone reached future? 2019. Stil no spec. – Echinoderm

Still waiting; while working from home. Because COVID-19. – Lannielanning

Nearly 10 years later, many of us have gray hair and some have passed away. We have self-driving cars, but pseudo-elements on images is the one bit of technology that we can't figure out. – Fitted

A suitable solution is to add a container class around the image and add the :before or :after to that to get the same or similar effect. – Andreas

That's shame it's still not possible in 2020. I laughed a lot at Kellen's comment though. Self-driving cars are easier than pseudo on an image... But soon Tesla will find out that they have a browser in their car, and it doesn't support pseudos on img, and Musk will have a heart attack, and universe will finally collapse. I hope then they will invent pseudos on images. RIP Musk – Seminal

2021. We keep waiting with undeads. (Last year corona came) – Osbert

It's now or never. – Idoux

10 full years have passed. We now have foldable screen phones, OLED portable consoles and gun-toting robodogs. The img::after pseudo-element has become a front-end fool's errand. – Dorthea

You can add it before/after the parent element of the image and then use z-index to place it before/after the image. – Servais

2023, it's been over a decade and I ended up here – Faille

2024 has dawned, WW3 might have begun in the Middle-East, and there's still no flippin' pseudo-elements on my flippin' images! – Cranwell

Answer 2

It could be that browser vendors have not implemented pseudo elements on the img tag because of their interpretation of the spec: the img element, strictly speaking, is not a block level element or an inline element, it is an empty element.

Bedizen

This seems correct, though the terminology has shifted since that HTML3 link (!). In HTML5, an img is what's called a "void" element. Examples of void elements include hr, input, and source. See: dev.w3.org/html5/markup/syntax.html#void-element // A quick bit of informal testing suggests that you can't add pseudo-elements to input elements either. – Arcanum

Answer 3

Just for testing and knowing it's not pretty you can do the following to make the pseudo elements work with 'img' elements.

Add: display: block; content: ""; height: (height of image)px to the img element in your CSS.

Though it will render your img tag empty cause of the content: "" you can then

Add: style="background-image: url(image.jpg)" to your img element in html.

Tested this in Fx, Chrome and Safari

Slovene

Doesn't seem to work with Mac Firefox 17. – Fasciculus

Only works for me in Firefox 23 if the image tag has a src that doesn't exist (404). – Bollen

I solved this by wrapping the img to span. Hackish, yes, but works in some occasions. – Synod