HTML CSS examples for CSS Widget:Table
Create list for table of content
<html> <head> <title>Lorem ipsum dolor sit amet, </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w. j av a 2 s .c o m--> color:Chartreuse; padding:3em; font:17px/2.3 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; background:yellow; } h1 { text-align:center } h1 cite { font-style:normal; } #mainhead2 li[value] { display:block; list-style:none } #mainhead2 li { border-bottom:2px dotted blue; line-height:2; height:2em; overflow:visible; margin:0 0 .26em 0; position:relative; } #mainhead2 span { padding:0 .26em; border-bottom:2px solid pink; background:OrangeRed; } #mainhead2 span.r { position:absolute; right:0; } </style> </head> <body> <h1> <cite>Lorem ipsu</cite>Lorem ipsum dolor s</h1> <ol id="mainhead2"> <li value="0"> <span class="l">Lorem ip</span> <span class="r">L</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, c</span> <span class="r">L</span> </li> <li> <span class="l">Lorem ipsum do</span> <span class="r">Lo</span> </li> <li> <span class="l">Lorem ipsum dolor sit am</span> <span class="r">Lo</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet,</span> <span class="r">Lo</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, cons</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit </span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ips</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, consectetur ad</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorpe</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, consectet</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet,</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, consectetur</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morb</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsum dolor sit amet, consectetur</span> <span class="r">Lor</span> </li> <li> <span class="l">Lorem ipsu</span> <span class="r">Lor</span> </li> </ol> </body> </html>