I'm having a go at using the :after pseudo-class to position an anchor's href attribute value after any external link on :hover, like so:
.external:hover:after { 
content: attr(href); padding: 2px 6px; font-size: 0.8em; border: 1px solid #6894ad; background: #fff; }
But positioning is bugging me. So far, early days, but I've tried absolute positioning to place it below the link, which seems to be the only way to avoid bumping other content out of the way.

But Firefox splits the URL after every slash (like it wants to make the pop-up as narrow as possible), and Chrome tends to align the pop-up with the parent paragraph, but not in every case. And I think that Chrome is splitting the URL at hyphens. It would work better if the URL is only split when screen space demands it or perhaps by max-length.

Is there a neat and reasonably reliable way to do this kind of pop-up? (No JavaScript, please).