SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS External Link exceptions

    I currently have an external link icon put after each link created. I do not want an external link icon on Google links

    /* CSS Code */

    a[href^="http:"]
    {
    display:inline-block;
    padding-right:14px;
    background:transparent url(="extlink.gif) no-repeat 100% 0;
    padding: 0 20px 0 0
    }


    a[href^="http:"] :hover:after { content: " > " attr (title);


    a[href*="google"]{
    background-image:none;
    }
    a[href*="google"] :hover:after { content: " "; }


    I have also tried

    a[href*="http://google"]{

    this doesn't work either.


    Anyone have any ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this works for me:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    a[href^="http:"] {
        display:inline-block;
        padding-right:14px;
        background:red url(extlink.gif) no-repeat 100% 0;
        padding: 0 20px 0 0;
    }
    a[href*="google"] {
        background:blue;
    }
    </style>
    </head>
    <body>
    <p><a href="http://www.yahoo.com">Yahoo</a></p>
    <p><a href="http://www.google.com">Google</a></p>
    </body>
    </html>


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
  •