Use CSS to access style custom attribute

Question

I don't know if this is possible or not, but any help would be very appreciated.

I have this code in my HTML:

<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">

where data-caption is a custom attribute.

I want to do something like this.

As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?

I tried doing something like this:

<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
    A picture of mountains!
</div>

CSS:

.inline-image {
    width:30%;
}

.photo-caption {
    width:30%;
    background-color:blue;
}

This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.

Thank you very much!

http://stackoverflow.com/questions/18300536/get-value-of-attribute-in-css — Alex McMillan, May 17 '15 at 14:57
Related: https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements — Alexander O'Mara, May 17 '15 at 15:05
Why the heck you want to do it in a wrong way? If you do not want to make "another" div, create figure and caption instead. Web documents are meant to be semantic — Maciej Kwas, May 17 '15 at 15:18
@MaciejKwas can you please explain what you mean by "web documents are meant to be semantic"? I do not really understand. — Joe, May 17 '15 at 16:05

Robin Carlo Catacutan · Accepted Answer · 2015-05-17T15:26:59.087

Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.

A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.

html:

<div class="img-block" data-caption="A picture of mountains!">
  <img src="mountains.jpeg" class="green inline-image" >
</div>

css

.img-block:after {
  content: attr(data-caption);
}

Reference

Use CSS to access style custom attribute

1 Answers1