List Styles

by Petra1999

HTML

<table>
<tr>
  <td>
    
<ul id="u1"><li>item one</li><li>item two ajsdkfjkl asdfjkalds jfkj sdfksjd fkdlsjfksdf</li><li>item three<br>continue</li><li>item four</li></ul>
<ul id="u2"><li>item one</li><li>item two ajsdkfjkl asdfjkalds jfkj sdfksjd fkdlsjfksdf</li><li>item three<br>continue</li><li>item four</li></ul>
<ul id="u3"><li>item one</li><li>item two ajsdkfjkl asdfjkalds jfkj sdfksjd fkdlsjfksdf</li><li>item three<br>continue</li><li>item four</li></ul>
<ul id="u4"><li>item one</li><li>item two ajsdkfjkl asdfjkalds jfkj sdfksjd fkdlsjfksdf</li><li>item three<br>continue</li><li>item four</li></ul>
<ul id="u5"><li>item one</li><li>item two ajsdkfjkl asdfjkalds jfkj sdfksjd fkdlsjfksdf</li><li>item three<br>continue</li><li>item four</li></ul>

  </td>
  <td>

<ol id="o1"><li>item one</li><li>item two</li><li>item three<br>continue</li><li>item four</li></ol>
<ol id="o2"><li>item one</li><li>item two</li><li>item three<br>continue</li><li>item four</li></ol>
<ol id="o3"><li>item one</li><li>item two</li><li>item three<br>continue</li><li>item four</li></ol>

  </td>
</tr>
</table>


<br><br>
<ul>
<li>these don't really support nested lists but so doesn't tumblr that much so.. yeah</li>
<li>made by <a href="http://cloudythms.tumblr.com/">cloudythms</a></li>
</ul>



fourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfourfour

CSS

ul#u1{
  list-style-type: circle; /* disc, circle, square */
}

/* ------ */

ul#u2 {
  list-style-type:none;
  border:1px solid gray;
  padding-left:0;
  margin-left:10px;
  width:50%;
}
ul#u2 li {
  border-bottom:1px solid gray;
  padding: 5px 10px;
}
ul#u2 li:last-child {
  border-bottom:none;
}

/* ------ */

ul#u3 {
  list-style-type:none;
  border-left:3px solid gray;
  padding: 5px 10px;
  margin-left:10px;
  
  background-color:#ededed;
  width:50%;
}
ul#u3 li {
  padding-bottom:5px;
}
ul#u3 li:last-child {
  padding-bottom:initial;
}

/* ------ */

ul#u4 {
  list-style-type:none;
  margin-left:0;
  padding-left:15px;
}
ul#u4 li {
  padding-left: 1em;
  text-indent: -1em;
}
ul#u4 li:before {
  content: "+";
  padding-right:5px;
}

/* ------ */

ul#u5 {
  list-style-image:
    url('https://nexxoninc.com/wp-content/uploads/2017/06/arrow-pointing-to-right.png');
}





/* --------------------------- */




ol#o1 {
  list-style-type: decimal-leading-zero;
  /* NUMBERS: decimal, decimal-leading-zero, lower-roman, upper-roman */
  /* LETTERS: lower-latin, upper-latin */
}

/* ------ */

ol#o2 {
  list-style-type:none;
  counter-reset:bulletpoint;
  margin-left:30px;
  padding-left:0;
}
ol#o2 li {
  counter-increment:bulletpoint;
  padding-left: 10px;
  text-indent: calc(-10px - 5px - 2px);
}
ol#o2 li:before {
  content: counter(bulletpoint /*, decimal-leading-zero */) ".";
  padding-right:5px;
  color:red;
}

/* ------ */

ol#o3 {
  list-style-type:none;
  counter-reset:bulletpoint;
  margin-left:30px;
  padding-left:0;
}
ol#o3 li {
  counter-increment:bulletpoint;
  padding-left: 10px;
  text-indent: calc(-10px - 5px - 2px);
}
ol#o3 li:before {
  content: counter(bulletpoint /*, decimal-leading-zero */) ")";
  padding-right:5px;
  font-size:11px;
  vertical-align:middle;
  opacity:0.7;
}




/* ------------ ignore ------- */

table {
  width:100%;
}

td {
  border:1px solid blue;
}