SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom underlines

    Does anyone know how to create this underline effect produced on this page:-

    http://www.alistapart.com/comments/customunderlines/

    If you look at the words 'home' and 'articles' - these are a different colour from the underlines. Also the gap between the underline and the word is greater than normal. How is that produced?

    I assume that the hover state is simply a change in text and background colour?

    Thank's for your help.
    Philippa

  2. #2
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css for the links on the page is something like:

    HTML Code:
    a {text-decoration: none;}
    a:link, a:visited {color: #555; border-bottom: 1px solid #555;}
    html body a:hover {color: #000; background-color: #F4F2E4;
      border-bottom: 1px solid #9A8E51;}
    So what they're doing is turning the underline off, and replacing it with a border-bottom - giving them control over its colour. (Looks like they could have messed with padding-bottom if they had so wished.)

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank's very much for your reply. I'll have a go at it.

    Philippa

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. It works perfectly!

    Philippa

  5. #5
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent!


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
  •