List items with borders spanning across the full width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

List items with borders spanning across the full width

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

ul {<!--from  w w w .  j av  a2  s . c  o  m-->
   list-style: none;
   font-size: 13px;
   width: 200px;
}
ul li.new:before {
   color: #f00;
   content: "?";
   padding-right: 0;
   position: absolute;
   margin-left:-1em
}
ul li {
   padding: 5px 9px 5px 1em;
   border-bottom: 1px solid gray;
}
ul li span {
   font-weight: bold;
}
ul li span div {
   float: right;
   font-weight: normal;
}
ul li span + div {
   padding-top: 2px;
   font-size: 9px;
}


      </style> 
 </head> 
 <body> 
  <ul> 
   <li class="new"> <span> Item 1 asd samdioa smodmasiom doasdmi oasi mdioas 
     <div>
       ? 
     </div> </span> 
    <div>
      2014-03-22, 14:20:21 
    </div> </li> 
   <li class="new"> <span> Item 2 asd asd asdas 
     <div>
       asdf
     </div> </span> 
    <div>
      2014-03-20, 11:20:03 
    </div> </li> 
   <li> <span> Item 3 asd asd asdas sduiosmn diomsio d 
     <div>
       fdsa
     </div> </span> 
    <div>
      2018-03-19, 04:01:35 
    </div> </li> 
   <li> <span> Item 4 asd asdasd 
     <div>
       asdf
     </div> </span> 
    <div>
      2018-03-15, 09:20:05 
    </div> </li> 
  </ul>  
 </body>
</html>

Related Tutorials