How did CSS `content` property work for `img` element in WebKit?

Question

Long time ago there was a draft of CSS3 Generated Content spec which allowed the content property for any HTML element (not only ::before/::after pseudo-element

Answer 1

I just recently noticed this. I was really frustrated with it. Glad to see somebody already mentioned it.

You guys seem much more knowledgeable on the topic than me. So, probably you already know these methods, but I will write my solution anyway, for juniors who will find this topic like myself.

I needed a method for broken image placeholders. I thought I could check files and give ".brokenimg" class names to tag in Back-end and change the image with CSS "content:". But It didn't work. (Tested in Chrome, Firefox, Opera, Edge, Samsung's Android Web Browser. All same.)

Then, I tried to change my script and use s instead of s. And tried this in CSS;

.brokenimg::before { content: url(picture.jpg); }

It almost worked but, But this is really limited and It wasn't what I needed.

So, solved my problem with JavaScript event;

<img onerror="this.src='broken.jpg'" src="image.jpg">

I know it is not the same thing. But in my case, it did exactly what I needed.

I guess we have to find ways like these for now.