CSS: image captions with generated content

Generated content is a powerful feature of CSS, though is not consistently supported in all browsers. Opera is surely among those browsers which have the most extended support to generated content. In fact, Opera allows generated content to be applied on images. This turns out to be very useful when we have to get particular effects with generated content. One of the most requested effects is to turn the alt attribute of an image into an image caption. Let's say that we have an image gallery with the following styles:

#gallery {
  padding: 2em 0;
 #gallery ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
 #gallery ul li {
  width: 30%;
  margin-right: 0.5em;
  float: left;
  height: 200px;
 #gallery ul li img {
  display: block;
  width: 100%;
  height: 150px;

To create image captions, just write this:

#gallery ul li img:after {
  content: attr(alt);
  display: block;
  text-align: center;
  font-style: italic;
  padding: 1em 0;

And here's the result:

Unfortunately, this works only in the Opera browser.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “CSS: image captions with generated content”

Leave a Reply

Note: Only a member of this blog may post a comment.