I have a series of images with numbered captions like "Fig. 1", "Fig. 2", "Fig. 3", followed by a brief description on the same line. Is there a way to programmatically style these strings (the “Fig. #” only) using CSS or Javascript to make them italicized and in small caps? I'd prefer this method over manually adding span tags to each one.
body {
counter-reset: figcaption;
counter-increment: 1;
}
figcaption:before {
counter-increment: figcaption;
font-variant: small-caps;
font-style: italic;
content: "Fig. " counter(figcaption) ". ";
}
#gallery {
width: 360px;
height: 3600px;
float: left;
background-color: #F8F1D4;
}
/* Other CSS styling rules go here */
Update
After implementing this solution suggested by guest271314, everything works well. However, I now have three additional questions:
The selected font and font-size are only working for the last caption, Fig. 10. How can I apply this styling to all the captions?
I would like to add a period after the number in "Fig. #."
How can I enclose code and HTML snippets in their own boxes like this?