Using ::after with an image tag? [duplicate]

Question

Is it possible to append text to images using the ::after pseudo-selector?

img[src="images/interface-zoom-buttons.png"]::after {
    content: "these are the zoom buttons";
}

The desire is to use the selector to provide a caption (other styling will be applied to the content of the selector) for images that get used over and over again in multiple HTML documents.

In the above example the image appears correctly and you can see that the appropriate CSS has been applied, but the content (supplied by the selector) is not seen in the output.

Answer 1

An img tag can not have child elements. Because img is a void element and its content model never allows it to have contents under any circumstances.

::after creates a pseudo element as the last child of its parent.

So img::after will not work ultimately because the browser will not allow it based on definition.

What you can do is to contain the img in a container and have ::after on the container.

Demo http://jsfiddle.net/x2za91jw/

HTML

<div class="container">
    <img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" />
</div>

CSS

.container {
    position: relative;
}
.container::after {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    content:"these are the zoom buttons";
}