JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ad">
    <a id="text_link" class="link middle right" href="#text">my text link<br>meow</a>
    <a href="#background"><img src="http://www.placekitten.com/320/200"></a>
</div>

CSS

.ad {
    position: relative;
    height: 200px;
    width: 320px;
}
.link {
    position: absolute;
    padding: 0;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }
a.link { padding: 0; margin: 0; }

JavaScript

window.onload = function() {
  var link = document.getElementById('text_link');
  var span = document.createElement('span');
  span.className = link.className
  var container = link.parentNode
  container.insertBefore(span, link);

  while (link.hasChildNodes()) {
    var child = link.removeChild(link.firstChild)
    if (child.nodeName == '#text') {
      var words = child.data.split(/(\s+)/)
      for (var j=0; j<words.length; ++j) {
        var t = document.createTextNode(words[j]);
        var l = document.createElement('a')
        l.href = link.href
        l.appendChild(t)
        span.appendChild(l)
      }
    } else {
       span = document.createElement('span');
       span.className = link.className
       container.insertBefore(span, link);
       span.appendChild(child)
    }
  }
  container.removeChild(link);
}