JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

<div class='div'>
  LI...
  <li>Bullet1</li>
  <li>Bullet2</li>
  <HR>

  UL...
  <ul>
    <li>Bullet3</li>
    <li>Bullet4</li>
    <ul>
      <li>Bullet5
      </li>
    </ul>
  </ul>

  <HR>
  OL....
  <ol>
    <li>Number1</li>
    <li>Number2</li>
  </ol>

  <HR>
  OL...OL/UL...
  <ol>
    <li>Number3</li>
    <ol>
      <li>Number3.1</li>
      <ul>
        <li>Bullet6</li>
      </ul>
      <ol>
        <li>Number3.1.1</li>
      </ol>
    </ol>
    <ul>
      <li>Bullet7</li>
    </ul>
  </ol>

</div>

CSS

ol,ul {
    margin:5px 1px;
    padding-inline-start:21px;
    padding-bottom:1px;
}
ol ul + h1,h2,h3,h4,h5,h6,p {
    padding-top:0;
}
.div ol > li {
    line-height:1.5em;
    margin-left:0;
    padding-left:0;
}

.div ul  >  ol {
    list-style-type: lower-alpha;
    padding-inline-start:18px;
}
.div ol  >  ol {
    list-style-type: lower-alpha;
    padding-inline-start:18px;
}
.div ul > ul > ol {
    list-style-type: lower-roman;
    padding-inline-start:23px;
    padding-left:25px;
}
.div ol > ol > ol {
    list-style-type: lower-roman;
    padding-inline-start:23px;
    padding-left:25px;
}
.div ol > ul > ol {
    list-style-type: lower-roman;
    padding-inline-start:23px;
    padding-left:25px;
}

.div ol > ol > ul > li {
    content:"▶"!important;
    color:green!important;
}
.div ul > li {
    line-height:1.4em;
}
.div > li {
    line-height:1.4em;
    margin-left:0;
}
.div li + li { /* This is the gap between LI bullets */
    margin-top:8px;
}
.div ul>li, .div>li {
    list-style-type:square;
    display:table;
    border-spacing:0;
}

.div ol > li::before {
    content:unset;
}
.div ul {
    list-style-position: outside;
    padding:0;
    margin:0 0 0 23px;
}
.div li::before {
    content:"▶";
    list-style-type: none;
    color:red;
    font-size:15pt;
    font-weight:bold;
    padding:1px 10px 0 0;
    line-height:18px;
    display:table-cell;
    vertical-align:top;
    xmargin-left:-20px;
}
.div ul + * {
    margin-top:15px;
}