Positioning content next to anchors (:after)

HTML & CSS
1

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).

2

We would have to see more of your CSS and mark up to be able to know what the specific issue is.

First of all, you are aware that this is not very IE friendly, right?

FF is using the slashes as end of words while Chr is using dashes, that’s why it’s “splitting it up” like you described. this MAY BE solved by adding white-space:nowrap; and a max-length to your rule.

since the :after pseudo element is inline, your padding and border are not be affecting the spacing the way you may be thinking. you could add display:inline-block; and see if that is more what intended… or recalculate the added padding.

Now about positioning, you could add position:relative; to the parent LINK(A tag) and hten use position absolute on your rule control the placement of the URL. However, since the URL content would be out of the normal flow, this would cause it to behave more like a tool-tip… and I dont know if that was your intent.

I hope this helps.

3

First of all, you are aware that this is not very IE friendly, right?

Yes. But should my site ever see the light of day, I doubt if any IE users are going to wonder why they are not seeing a URL when they hover over a link…

since the :after pseudo element is inline, your padding and border are not be affecting the spacing the way you may be thinking. you could add display:inline-block; and see if that is more what intended… or recalculate the added padding.

Yes, I’m aware that it’s inline, but changing the display level didn’t help.

Now about positioning, you could add position:relative; to the parent LINK(A tag) and hten use position absolute on your rule control the placement of the URL.

I said that I had used absolute positioning.

However, since the URL content would be out of the normal flow, this would cause it to behave more like a tool-tip… and I dont know if that was your intent.

It is.

4

Hmm, I don’t get that in FF. If you want to position it absolutely, make sure to position the parent link relatively, like so:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
.external {position: relative;}
.external:hover:after { 
content: attr(href); padding: 2px 6px; font-size: 0.8em; border: 1px solid #6894ad; background: #fff; position: absolute; top: 12px; left: 0;}
</style>	

</head>
<body>

<p><a class="external" href="http://mysite.com/">Link</a> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>
</html>
5

oh… I missed the part about AP. Yes AP is the ONLY way in which you can take content out of the flow so that it doesn’t bump text out of the way. AP also "shrink-wraps " content, I believe that’s why you are seeing the odd breakage… as I said earlier, try adding white-space:nowrap; to your .external:hover:after rule and display:inline-block .external rule. AP something of an inline element is a bit of a headache otherwise…


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
.external {position: relative; display:inline-block}
.external:hover:after { 
content: attr(href); padding: 2px 6px; font-size: 0.8em; border: 1px solid #6894ad; background: #fff; position: absolute; top: 100%; left: 0; margin-top:-.25em;
white-space:nowrap;
}
</style>	

</head>
<body>

<p><a class="external" href="http://mysite.com/longe/link/still has a weirf/">Link</a> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>
</html>
6

Yes, nowrap has the produced single lines that I wanted.

Thanks.