Extending element's bottom border till the end of screen - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-bottom

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-bottom

Description

Extending element's bottom border till the end of screen

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style media="all">

body, ul, li {margin: 0; padding: 0;}
.wrap {width: 900px; margin: 0 auto; background: #e7e7e7; min-height: 600px;}
.menu {list-style: none; float: right; position: relative;}
.menu li {float: left; margin-left: 20px;}
.menu li:first-child {margin-left: 0;}
.menu li a {text-decoration: none; display: block; line-height: 2em; text-transform: uppercase;}
.menu li a:hover {text-decoration: underline;}
.menu:after {<!--   w  w w.  j  a v a2s .co  m-->
   content: "";
   height:0;
   width: 9999px;
   border-bottom: 1px solid #ccc;
   position: absolute;
   left: 0;
   bottom: 0;
}

      </style> 
 </head> 
 <body> 
  <div class="wrap"> 
   <ul class="menu"> 
    <li> <a href="">Link 1</a> </li> 
    <li> <a href="">Link 2</a> </li> 
    <li> <a href="">Link 3</a> </li> 
    <li> <a href="">Link 4</a> </li> 
    <li> <a href="">Link 5</a> </li> 
    <li> <a href="">Link 6</a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials