Least Tern > Tech Class > Teacher Resources > Web Design Resources

 

CSS Link Underlining

 

Custom link underlining can be created by following these steps:

 

  1. Create your underline image.  Here is the image I created: underline image 
    1. It is 12 x 7 (pixels) and transparent (.gif).
    2. If you want a continuous line, the image will need to tile - it must have no margin left or right.
    3. Here are some other line images you may use:
    spinning star bullet
    goldstar
    http://www.gifs.cc/anibullets.htm http://www.4yeo.com/pagelements/bullets/smallf.htm
    arrow star
    smiley
    http://www.designedtoat.com/bulletsmain.htm http://www.hellasmultimedia.com/webimages/bullets-htm/bullets.htm

     

  2. Now access this web page to get the directions.  CSS Design: Custom Underlines (http://www.alistapart.com/articles/customunderlines/)
  3. If the page has disappeared, you can use the code below.
  4. If you have Dreamweaver,
    1. you can use the CSS Styles palette to redefine the <p>, and <a> tags.
    2. You will have to create a custom tag called "hover" to use the hover effect I use here.
    3. Then you will need to enter code view and change "hover" to "a:hover" in the style sheet.

Code: (change content in red, being sure to point to your image in relation to the web page)

Place in <head>

a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

 

E. Sky-McIlvain 3/7/04