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

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?

I wrote this (not fantastic) answer that's relevant: http://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements — thirtydot, Sep 15 '11 at 00:26

score 167 · Accepted Answer · edited May 19 '22 at 13:42

167

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.

edited May 19 '22 at 13:42

Zach Jensz

3,650
5
15
30

answered Sep 13 '11 at 03:25

alex

479,566
201
878
984

2

*This will be defined in more detail in a future specification*. **Ahem** "PUNT!" – Jared Farrish Sep 13 '11 at 03:26
25

The real SOer should ask a question and 3 minutes after answer to himself, +1 ;-) – zerkms Sep 13 '11 at 03:33
57

It's the future, still no specs... – Madara's Ghost Nov 16 '12 at 18:18
7

It's the future again, still no specs? – kangax Sep 19 '13 at 13:28
5

@kangax Maybe we should write it and submit it the W3C. – alex Sep 19 '13 at 16:28
The abandoned [CSS3 Generated Content module](http://www.w3.org/TR/css3-content/#replacedContent), 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. – BoltClock Nov 17 '13 at 15:57
2

Again! Future! What's going on? – philgiese Sep 09 '14 at 09:59
1

Sure would be useful right about now – shipwreck Nov 12 '14 at 21:03
1

4 years into the future and still waiting! – Mygel Bergstresser Mar 25 '16 at 00:16
THIS iS 2016...this is why mobile native apps will win. – Muhammad Umer May 18 '16 at 18:30
2

Its 2016 And still waiting!!! – Tharaka Nuwan Jul 27 '16 at 11:22
22

2017 here, same. – Hjalmar Feb 01 '17 at 14:47
4

mid 2017 here, still no specs... – Amjo Jul 14 '17 at 10:43
3

Almost 2018, still no specs. – Safal Pillai Dec 18 '17 at 10:52
4

2018.. still counting – DDRamone Jan 30 '18 at 14:07
3

*Le sigh* Still waiting in 2018... BibleThump – JRad the Bad May 03 '18 at 16:18
Still the future....... – jarrodwhitley Sep 20 '18 at 19:09
30

It's 2019, and 8 years passed. When will we reach the future exactly? – v3ntus Jan 16 '19 at 15:56
2

Does the future exist? – basickarl Feb 18 '19 at 21:25
2

Future does not exist yet – Evgeny Vostok Apr 18 '19 at 09:08
Still waiting for the future to exist. Did we all die already? – Saif Al Falah Jun 20 '19 at 21:49
Have someone reached future? 2019. Stil no spec. – Adam Šipický Dec 05 '19 at 16:58
6

Still waiting; while working from home. Because COVID-19. – snow Mar 13 '20 at 12:08
49

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. – Kellen May 25 '20 at 17:35
1

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. – Hellodan Jun 09 '20 at 14:33
6

That's shame it's still not possible in 2020. I laughed a lot at [Kellen's comment](https://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements#comment109669977_7396482) 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 – Jerry Green Jul 29 '20 at 11:45
2

2021. We keep waiting with undeads. (Last year corona came) – mehmetdemiray Jan 18 '21 at 09:02
1

It's now or never. – m4n0 Jan 27 '21 at 08:57
3

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. – saeraphin Oct 25 '21 at 11:47
1

You can add it before/after the parent element of the image and then use z-index to place it before/after the image. – Billy Mitchell Jan 26 '22 at 18:20
2023, it's been over a decade and I ended up here – Joqus Jul 13 '23 at 23:41

score 11 · Answer 2 · answered Jun 14 '12 at 16:18

11

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.

answered Jun 14 '12 at 16:18

Joel Glovier

7,469
9
51
86

7

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: http://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. – Ben Sep 13 '12 at 21:47

score 7 · Answer 3 · edited Sep 26 '12 at 08:23

7

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

edited Sep 26 '12 at 08:23

ASR

1,801
5
25
33

answered Sep 01 '12 at 08:19

Ferdi Emmen

275
3
10

Doesn't seem to work with Mac Firefox 17. – biziclop Jan 05 '13 at 09:18
Only works for me in Firefox 23 if the image tag has a src that doesn't exist (404). – thenickdude Aug 13 '13 at 01:55
1

I solved this by wrapping the img to span. Hackish, yes, but works in some occasions. – Jaakko Karhu Apr 16 '15 at 11:10

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

HTML

CSS

3 Answers3

Linked

Related