show Alt text as caption
March 18, 2023
Due to the nature of <img> being a replaced element, document styling doesn’t affected it.
To reference it anyway, <picture> provides an ideal, native wrapper that can have pseudo-elements attached to it, like so:
img::after,
picture::after{
content:"\1F63B";
font-size:larger;
margin:-1em;
}<imgsrc="//placekitten.com/110/80">
<picture><imgsrc="//placekitten.com/110/80">
</picture>Apr 25, 2019 at 15:07, dakab
From <https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements>
In these cases it is preferable to use the <figure> tag, Giuseppe Ruffa
From <https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements>
…
The figcaption element is a more recent addition and was introduced in HTML5 in 2014. It comes with a parent figure element which can describe a variety of media and text, such as photos, videos, illustrations, diagrams and charts, quotes, poems, code snippets, etc. These items are usually related to the main body of text and further illustrate an idea. A figcaption is not required to be in every figure element, but a figcaption always needs a figure parent.
From <https://thoughtbot.com/blog/alt-vs-figcaption>
Using the picture tag
The picture tag was meant for responsiveness and art direction.
<picture>
<sourcemedia="(min-width:650px)"srcset="cat_big.jpg">
<sourcemedia="(min-width:465px)"srcset="cat_small.jpg">
<img src="api/images/HzqAGQK23bvh/cat_default.jpg" alt="Cat>
</picture>You can use it to tell the browser what variant of the image to use and when.
From <https://www.js-craft.io/blog/when-to-use-the-img-figure-or-picture-html-tags/>
...
Figure is a block-level element.
Picture is an inline-level element.
From <https://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5>
...
there’s a second argument that can be passed in after the path: the title.2
From <https://dev.to/stephencweiss/markdown-image-titles-and-alt-text-5fi1>
...
Targeting Captions with CSS
By using writing your caption with *emphasis* on the line immediately following an image, you can use CSS to target and style captions to look different from ordinary text:
*The Amazon Rainforest contains a multitude of species.*The <em> caption can then be targeted in CSS like so:
img+em{/* style your captions here */}
From <https://thesynack.com/posts/markdown-captions/>
Introducing the figcaption Tag
The figcaption HTML tag is made for image or figure captions, and can easily be embedded into Markdown:
<figcaption>The Amazon Rainforest contains a multitude of species.</figcaption>Using this HTML tag makes your Markdown portable to any processor, it’s true to Markdown’s (and HTML’s) intent, and it works anywhere in your Markdown, thus making it the best solution thus far
From <https://thesynack.com/posts/markdown-captions/>