The first thing you have to do is upload a photo. Then add a few words for your caption right beneath the photo. After that, write your post as you normally would. When you’re done writing your post, add some code, just like in the example below (#1):
1. Add the following HTML to your blog post:
The next step is where the magic happens. Add the following CSS to your CSS file. You can customize the width and any of the other values to suit your page. For example, if you prefer a left border, change the CSS accordingly. But wait! Before making any changes to your CSS, make sure to save a backup just in case. :)
2. Add the following classes to your CSS:
border-top:3px solid BORDER-COLOR-HERE;
P.S. — CSS STYLE Workshops
By the way, I’m going to publish a series of CSS eLectures and workshops by September. The series will be called STYLE. If you’d like to keep up-to-date with any announcements, you can subscribe to my blog here. In the meantime, I hope you have fun experimenting with these block captions.
Before editing your CSS file, please make a backup. I do not provide tech support at this time. Need a CSS review? Check out my HTML/CSS tutorials.