JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://js1k.com/1555">http://js1k.com/1555</a><br>
<a href="https://twitter.com/mahonnaise/status/556498196718166016">https://twitter.com/mahonnaise/status/556498196718166016</a><br>
<a href="weblog">weblog</a><br>

<p>There <a href="http://en.wikipedia.org/wiki/Trees">http://en.wikipedia.org/wiki/Trees</a> in the <a href="https://en.wikipedia.org/wiki/Woods">https://en.wikipedia.org/wiki/Woods</a>, let's set them on <a href="fire">fire</a>!</p>

<dl>
    <dt>Tree</dt>
    <dd><a href="http://en.wikipedia.org/wiki/Tree">http://en.wikipedia.org/wiki/Tree</a></dd>
    
    <dt>Woods</dt>
    <dd><a href="https://en.wikipedia.org/wiki/Woods">https://en.wikipedia.org/wiki/Woods</a></dd>
</dl>

CSS

/* actually one character more due to parental padding/margin. we'll hide it in the viewport gutter :) */
a[href^="http:"], a[href^="https:"] { overflow:hidden; font-family: monospace; }
a[href^="http:"] { margin-left: -8ch; margin-left:calc(.5px - 8ch); }
a[href^="https:"] { margin-left: -9ch; margin-left:calc(.5px - 9ch); }

dt { float: left; width: 80px; }
dt:after { content: ":"; }
dd { overflow: hidden; }
dd>a[href^="http:"] { margin-left: -7ch; margin-left:calc(.5px - 7ch); }
dd>a[href^="https:"] { margin-left: -8ch; margin-left:calc(.5px - 8ch); }