![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmlDgKj-hRob5v32VzSEDBG26DRkedbgVhCXzrNRKjKZeuWFHbSLB9fdcvL9YS_9wrc0-JpyaMQVeZdt8M2zcvJNB_k9gNV4CDX7Vjahcu1vJCI2K58Yl2pffEYzh_HsL54R1xdi9LuWV/s1600/%25E3%2582%25A4%25E3%2583%25A1%25E3%2583%25BC%25E3%2582%25B8019.jpg)
画像にキャプションを付ける では em 要素を使ってキャプションを付けましたが、ここでは疑似要素を使った方法を紹介します(画像の下にキャプションを付ける場合は、素直に em 要素を使ったほうがよいと思います)。
HTML
補足
- キャプションの文字列は span.frame-img 要素の独自データ属性 data-caption で指定します(img 要素には疑似要素を付けられないようなので、ここで指定しています)。
CSS
補足
- 疑似要素 after のcontent プロパティの値に、独自データ属性 data-caption を指定しています。