0

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.

Georgy Liparteliani
  • 403
  • 2
  • 6
  • 16

2 Answers2

2

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.

bookcasey
  • 39,223
  • 13
  • 77
  • 94
1

Pseudo elements are appended/prepended to the element's contents. Since an <img> (and an <input> for instance) has no contents, it cannot have pseudo elements applied on it.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308