Grains Of Sand | Web Design, CSS Demos & HTML5 Templates by tupence

Add A Caption To An Image Using :before and :after
Step By Step Guide

What We're Aiming For

  • Bassenthwaite
  • Above Keswick
  • Grizedale

Step One
Add the images in an unordered list and add a title to each list item that will be used as the caption

Code

HTML
  • <ul>
  • <li title="Bassenthwaite, Keswick"><img src="image01.jpg" width="200" height="133" alt="Bassenthwaite"></li>
  • <li title="Somewhere near Keswick"><img src="image02.jpg" width="200" height="133" alt="Above Keswick"></li>
  • <li title="Grizedale, Cumbria"><img src="image03.jpg" width="200" height="133" alt="Grizedale"></li>
  • </ul>
CSS
  • none yet

Result

  • Bassenthwaite
  • Above Keswick
  • Grizedale

Step Two
Add an id to the <ul> tag so we can style it seperately from other unordered lists

Code

HTML
  • <ul id="caption">
  • <li title="Bassenthwaite, Keswick"><img src="image01.jpg" width="200" height="133" alt="Bassenthwaite"></li>
  • <li title="Somewhere near Keswick"><img src="image02.jpg" width="200" height="133" alt="Above Keswick"></li>
  • <li title="Grizedale, Cumbria"><img src="image03.jpg" width="200" height="133" alt="Grizedale"></li>
  • </ul>
CSS
  • ul#caption {
  • list-style-type:none; /*remove the bullet point from the list items*/
  • }
  • l#caption li{
  • display:inline-block; /*places the images in a line*/
  • padding:0 20px; /*padding around the images*/
  • /*style the caption text*/
  • font-size:90%;
  • font-family:'droid sans', sans-serif; /*Droid Sans is available at Google Webfonts*/
  • color:#525252;
  • text-align:center;
  • }
  • /**Add a small drop shadow to the images**/
  • #caption img{
  • -webkit-box-shadow: 2px 2px 10px #919191;
  • -moz-box-shadow: 2px 2px 10px #919191;
  • box-shadow: 2px 2px 10px #919191;
  • }

Result

  • Bassenthwaite
  • Above Keswick
  • Grizedale

Step Three
Add a class to each list item, 'above' or 'below' depending on where the caption is to appear

Code

HTML
  • <ul id="caption">
  • <li class="below" title="Bassenthwaite, Keswick"><img src="../assets/before01.jpg" width="200" height="133" alt="Bassenthwaite"></li>
  • <li class="above" title="Somewhere near Keswick"><img src="../assets/before02.jpg" width="200" height="133" alt="Above Keswick"></li>
  • <li class="below" title="Grizedale, Cumbria"><img src="../assets/before03.jpg" width="200" height="133" alt="Grizedale"></li>
  • </ul>
CSS
  • li.below:after{ /* by using :after we place the caption after the image, when used with display:block this will be underneath the image*/
  • content: attr(title); /*places the contents of title below the image*/
  • display:block; /*puts the caption on its own line instead of at the side of the image*/
  • }
  • li.above:before{ /* by using :before we place the caption before the image, when used with display:block this will be on top of the image*/
  • content: attr(title); /*places the contents of title below the image*/
  • display:block; /*puts the caption on its own line instead of at the side of the image*/
  • }

Result

  • Bassenthwaite
  • Above Keswick
  • Grizedale

Back to the demo More CSS3 Demos This Way