JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<figure>
    <figcaption>Experiments</figcaption>
</figure>

<figure>
    <figcaption>Experiments</figcaption>
</figure>

<figure>
    <figcaption title="Chemistry">Experiments</figcaption>
</figure>

<figure>
    <figcaption title="Chemistry">Experiments</figcaption>
</figure>

CSS

figcaption:before {
  display: block;
}

figure:nth-child(1) figcaption:before
{
   content: 'Figure \n Chemistry';
}

figure:nth-child(2) figcaption:before
{
   content: 'Figure \A Chemistry';
}

figure:nth-child(3) figcaption[title]:before
{
   content: 'Figure \a' attr(title);
}

figure:nth-child(4) figcaption[title]:before
{
   content: 'Figure \a' attr(title) ' ';
   white-space: pre;
}