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,#000 86%,transparent 100%) 0 0/20px 1.2em repeat-y;
}

<div class="Unordered">
    List item 1<br>
    List item 2<br>
    List item 3<br>
</div>

<div class="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;
}

<div class="Unordered"><z></z>
    List item 1<z></z>
    List item 2<z></z>
    List item 3<z></z>
</div>

<div class="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,#000 86%,transparent 100%) 0 0/20px 1.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;
}

<div class="Unordered"><br>
    List item 1<br>
    List item 2<br>
    List item 3<br>
</div>

<div class="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;
}

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