SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot ruben's Avatar
    Join Date
    Dec 2000
    Location
    home
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding between text and underline

    Is there any way I can change the space between the text and underline on links? I'm not talking about line-height.
    Why is duck?

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried line-height?

    If that doesn't work then I don't think there would be any way of changing it like that.

    You COULD however, try removing the underline from the link like so:

    text-decoration: none

    then use the border property like so:

    border-bottom: 1px solid #000000; padding-bottom:2px;

    For example, copy this code. You should see an underline that is 2 pixels below the text:

    Code:
    <html>
    <head>
    <title> New Document </title>
    <style type="text/css">
    <!--
    /* link colors */
    a:link { font-weight: bold; text-decoration: none; color: #2b4d8a; }
    a:hover { font-weight: bold; text-decoration: none; color: #000000; }
    a:visited { font-weight: bold; text-decoration: none; color: #2b4d8a; }
    a:visited:hover { font-weight: bold; text-decoration: none; color: #000000; }
    .underline {border-bottom: 1px solid #000000; padding-bottom:2px;}
    -->
    </style>
    </head>
    <body>
    <a href="bitemte.html" class="underline">This is a test link</a>
    </body>
    </html>
    Just play with putting the border code inside one of the HREF tags until you get the effect you're looking for.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Zealot ruben's Avatar
    Join Date
    Dec 2000
    Location
    home
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work with line-height, but what you suggested is a good idea. Thank you.
    Why is duck?


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
  •