Easy CSS trick to have image captions on Markdown
Image captions doesn’t come out of the box when it comes to markdown.
We can fix this up by applying CSS adjacent sibling combinator. This selector works by matching two elements only when its immediately after one another, and both elements needs to be contained with in the same element. So let see how we can make this work.
Suppose we have the markdown below with the image followed by some text.
*image by xyz*
If we inspect the generated HTML we may see something like the snippet below. Now its worth mentioning that each markdown parser may generate different html, especially when you are using static web generators on top of that. Therefore it is important to understand what is generated before proceeding to write the css selector.
<p>
<a href="/static/some-image.jpg">
<img src="some-image.jpg">
</a>
<em>image by xyz</em>
</p>
From the snippet above, we can see that the parent <p> element
contains 2 child elements <a> and <em>. Therefore we are able to
write css selector using the adjacent sibling combinator + since the
rules above applies. It would look something like:
a + em {
display: inherit;
text-align: center;
font-size: 1.4rem;
}
There you go! You should get something similar to the image below.
image showing
caption under image