Positioning content next to anchors (:after)
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:
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.
content: attr(href); padding: 2px 6px; font-size: 0.8em; border: 1px solid #6894ad; background: #fff; }
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.