SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code:
    .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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by adh32 View Post
    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
    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:

    Code:
    <!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. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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...

    Code:
    <!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. #6
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, nowrap has the produced single lines that I wanted.

    Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •