Question

Trying to make information about image below it. But have A problem… Pseudo element is not visible..

<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>

div {
    height: 100px;
    margin: 10px;
    background: yellow;
}
div[info]::after, img[info]::after {
    content: attr(info);
    display: block;
    margin: 3px;
    color: black;
    font-style: italic;
}

Jsfiddle DEMO

Thanks.

Answer 1

img elements can’t have pseudo elements, because they can’t have children—::before is inserted within the element. It would look like this:

<img><before></img>

Or at least itt isn’t defined by the spec

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.