SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Jackal_Dude's Avatar
    Join Date
    Dec 2003
    Location
    texas
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Hover Text-Decoration

    I was just wondering if anyone knew how to get that cool text effect for the hover where the underline is a different color from the text itself.

    a{
    text-decoration:none;
    }

    a:hover{
    text-decoration:underline;
    ???text-decoration-color:#whatever???;
    }

    Anyone know how to do this?

    Thanks in advance.

  2. #2
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just read that you have to set the border-bottom color of the a:hover to a different color, don't know if thats it?

    Martin Lundberg
    Sweden

  3. #3
    SitePoint Enthusiast Jackal_Dude's Avatar
    Join Date
    Dec 2003
    Location
    texas
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured it out.

    Just FYI if anyone ever wants to use this.

    To get a different color on the underline, you just need two containers; a link, and one inside the anchor tag, like so:
    <style>
    <!--
    .orange:link{
    font-family: arial,verdana;
    font-size: 11px;
    color: #F26622;
    text-decoration: none;

    }

    .orange:hover{
    font-family: arial,verdana;
    font-size: 11px;
    color: #F26622;
    text-decoration: underline;
    }

    .grey{
    color: #7e7e7e;
    }
    -->
    </style>

    <a href="#" class="orange">
    <span class="grey">
    This is your link
    </span>
    </a>
    Last edited by Jackal_Dude; Jan 9, 2004 at 13:29.


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
  •