Creating Html Lists Purely In Css

Trying to make it easy for a disabled friend to enter content into the site that I created for him without excessive typing, is there some way in CSS to create bulleted and ordered

Solution 1:

You can approximate this using background coloration where you have control over the height of each line by setting line-height

.Unordered {
   padding-left:20px;
   margin:10px;
   line-height:1.2em;
   background:
    radial-gradient(circle 0.3em,#00086%,transparent 100%) 00/20px1.2em repeat-y;
}

<divclass="Unordered">
    List item 1<br>
    List item 2<br>
    List item 3<br></div><divclass="Unordered">
    List item 1<br>
    List item 2<br>
    List item 3<br>
    List item 4<br>
    List item 5<br></div>

Or like below if you are able to consider a different tag for the line break than <br>

.Unordered,
.Ordered{
   padding-left:20px;
   margin:10px;
   counter-reset:num;
}
/*Line break*/.Unordered z::before,
.Ordered z::before{
   content:"\A";
   white-space:pre;
}
/*bullet*/.Unordered z::after {
   content:"•";
}
/*numver*/.Ordered z::after {
   content:counter(num) ".";
   counter-increment:num;
}
.Unordered z:last-of-type,
.Ordered z:last-of-type{
  display:none;
}

<divclass="Unordered"><z></z>
    List item 1<z></z>
    List item 2<z></z>
    List item 3<z></z></div><divclass="Ordered"><z></z>
    List item 1<z></z>
    List item 2<z></z>
    List item 3<z></z>
    List item 4<z></z>
    List item 5<z></z></div>

Another hacky idea (I insist on hacky)

.Unordered,
.Ordered{
   padding-left:20px;
   margin:10px;
   line-height:1.2em;
   position:relative;
   overflow:hidden;
}
.Unordered:before{
  content:"";
  position:absolute;
  top:1.2em;
  bottom:0;
  left:0;
  right:0;
   background:
    radial-gradient(circle 0.3em,#00086%,transparent 100%) 00/20px1.2em repeat-y;
}
.Ordered:before{
  content:"1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20";  /*yes manually write them all !!*/position:absolute;
  top:1.2em;
  bottom:0;
  left:0;
  width:0;
}

<divclass="Unordered"><br>
    List item 1<br>
    List item 2<br>
    List item 3<br></div><divclass="Ordered"><br>
    List item 1<br>
    List item 2<br>
    List item 3<br>
    List item 4<br>
    List item 5<br></div>

Solution 2:

use "before" for span tag to make bullet!

.Unordered {
    margin: auto;
    float:left;
    flex-direction: row;
    width: 100%;
    text-align: center;
}

.Unordered br {
    list-style-type: disc;
}

span:before {
  content: ' \25CF';
  font-size: 20px;
}

span{
    display:block;
    width:100%;
    text-align:left;
    float:left;
}

<divclass="Unordered"><span>List item 1</span><span>List item 2</span><span>List item 3</span></div>