JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<p>
    <span id="a2">After much head-scratching over the <a href="http://www.collylogic.com/index.php?/weblog/comments/css_challenge/">CSS Challenge</a>, finally a combination of methods from <a href="http://lloydi.com">Ian Lloyd</a> and <a href="http://simon.incutio.com/">Simon Willison</a> (plus the input of quite a few other luminaries) led <a href="http://www.snook.ca/jonathan/">Jonathan Snook</a> to get closer than anyone else. It's not quite perfect yet, but today readers, I give you <strong>Snook's Resizable Underlines</strong>.</span></p>

CSS

body {background-color:#FFF;}
p { width:300px; position:relative; text-align:justify; }
span#a1 { color:#FFF; border-bottom:1px solid orange; }
span#a1 a { color:#FFF; }
span#a2 { position:absolute; left:0; top:0; text-align:left;}

JavaScript

var el = document.getElementById("a2");
var dup = el.cloneNode(true);
dup.id = "a1";
el.parentNode.appendChild(dup);