JSFiddle - React, Tailwind, and code Playground

by daneden

HTML

<a class="footnote" href="http://daneden.me">A cool blog</a><br />
<a class="footnote" href="http://forrst.com">A cool site</a><br />
<a class="footnote" href="http://placekitten.com/400/300">A kitten</a>

<hr>

<a class="inline" href="http://daneden.me">A cool blog</a><br />
<a class="inline" href="http://forrst.com">A cool site</a><br />
<a class="inline" href="http://placekitten.com/400/300">A kitten</a>

<hr>

A cool blog<a class="tooltip" href="http://daneden.me"></a><br />
A cool site<a class="tooltip" href="http://forrst.com"></a><br />
A kitten<a class="tooltip" href="http://placekitten.com/400/300"></a>

CSS

body {
    counter-reset: ref;
    counter-reset: ref2;
}

a {
    color: #39c;
    text-decoration: none;
}

a.footnote:after {
    color: black;
    counter-increment: ref;
    content: " (" counter(ref) ")";
}

a.inline:after {
    color: black;
    content: " (" attr(href) ")";
}

a.tooltip {
    counter-increment: ref2;
    content: counter(ref2);
}