Using :: after with an image tag?
Is it possible to add text to images using a pseudo selector ::after
?
img[src="images/interface-zoom-buttons.png"]::after {
content: "these are the zoom buttons";
}
Willingness to use a selector to create a caption (a different style will be applied for styles) for images to be used over and over again in multiple HTML documents.
In the example above, the image is displayed correctly and you can see that the corresponding CSS has been applied, but the content (provided by the selector) is not displayed in the output.
source to share
The img tag cannot have child elements. Because img
is a void element and its content model never allows it to have content under any circumstances.
::after
creates a pseudo-element as the last child of its parent.
So, img::after
won't work in the long run because the browser won't allow it based on the definition.
What you can do is contain img
in a container and have ::after
in a 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";
}
source to share