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

css pseudo-element css-content

101,891

Solution 1

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.

Solution 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.

Solution 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

101,891

Author by

user3167101

I like to make stuff. Check out my blog. You can email me at alex at my domain. My dotfiles, if you're curious :)

Updated on November 18, 2020

Comments

user3167101 over 3 years
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?
Jared Farrish over 12 years

This will be defined in more detail in a future specification. Ahem "PUNT!"
zerkms over 12 years

The real SOer should ask a question and 3 minutes after answer to himself, +1 ;-)
Ben over 11 years

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.
Madara's Ghost over 11 years

It's the future, still no specs...
biziclop over 11 years

Doesn't seem to work with Mac Firefox 17.
thenickdude over 10 years

Only works for me in Firefox 23 if the image tag has a src that doesn't exist (404).
kangax over 10 years

It's the future again, still no specs?
user3167101 over 10 years

@kangax Maybe we should write it and submit it the W3C.
BoltClock over 10 years

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.
philgiese over 9 years

Again! Future! What's going on?
shipwreck over 9 years

Sure would be useful right about now
Jaakko Karhu about 9 years

I solved this by wrapping the img to span. Hackish, yes, but works in some occasions.
Mygel Bergstresser about 8 years

4 years into the future and still waiting!
Muhammad Umer almost 8 years

THIS iS 2016...this is why mobile native apps will win.
Tharaka Nuwan almost 8 years

Its 2016 And still waiting!!!
Hjalmar about 7 years

2017 here, same.
Amjo almost 7 years

mid 2017 here, still no specs...
Safal Pillai over 6 years

Almost 2018, still no specs.
DDRamone about 6 years

2018.. still counting
JRad the Bad almost 6 years

Le sigh Still waiting in 2018... BibleThump
jarrodwhitley over 5 years

Still the future.......
v3ntus over 5 years

It's 2019, and 8 years passed. When will we reach the future exactly?
basickarl about 5 years

Does the future exist?
Evgeny Vostok about 5 years

Future does not exist yet
Saif Al Falah almost 5 years

Still waiting for the future to exist. Did we all die already?
Adam Šipický over 4 years

Have someone reached future? 2019. Stil no spec.
snow about 4 years

Still waiting; while working from home. Because COVID-19.
Kellen almost 4 years

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.
Hellodan almost 4 years

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.
Jerry Green over 3 years

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
mehmetdemiray over 3 years

2021. We keep waiting with undeads. (Last year corona came)
m4n0 about 3 years

It's now or never.
saeraphin over 2 years

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.
Billy Mitchell about 2 years

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