Set border for an anchor with
  • under
      in a
      : Anchor « Tags « HTML / CSS






    1. HTML / CSS
    2. Tags
    3. Anchor

    Set border for an anchor with

  • under
      in a 

       
<!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>
<title></title>
<style type="text/css">

#navsite ul li a {
 display: block; 
 padding: 2px 2px 2px 0.5em; 
 border-left: 10px solid #369; 
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036; 
 color: #fff; 
 text-decoration: none; 
 width: 100%; 
}

</style>
</head>
<body id="pagespk">
  <div id="navsite">
    <h5>Site navigation:</h5>
    <ul>
     <li><a href="/" id="linkhom">Home</a></li>
     <li><a href="/about/" id="linkabt">About</a></li> 
     <li><a href="/archives/" id="linkarh">Archives</a></li>
     <li><a href="/writing/" id="linkwri">Writing</a></li>
     <li><a href="/speaking/" id="linkspk">Speaking</a></li> 
     <li><a href="/contact/" id="linkcnt">Contact</a></li>
    </ul>
  </div>
</body>
</html>








    • Related examples in the same category

    1.Introduction to hyperlinks
    2.'link' defines relationship between the current page and external documents
    3.A basic link to another page
    4.A basic link to an external web site
    5.A link with a title attribute
    6.A link with white space
    7.a name = ".."> creates an internal hyperlink
    8.Anchor element
    9.relative link
    10.background image, repeat and position for anchor link
    11.avoid underlining links
    12.Set text-decoration to none for
    13.Anchor hover image style
    14.Set cursor for anchor link and visted
    15.Set text decoration for anchor
    16.Set background for anchor
    17.Four level nesting for anchor style setting
    18.Using Links - Changing Backgrounds
    19.Using Links with Background Images
    20.Image links
    21.anchor style for removing the underline
    22.Add text decoration for link
    23.Add background image to anchor link
    24.List with anchor
    25.Using images as link anchors
    26.text-decoration, color, background-color for hover anchor