Creating HTML Lists Purely in CSS

Question

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 lists using existing line breaks or tabs rather than putting in list elements? These examples are for unordered but ordered is also needed.

For example, this:

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

. . . with the br coming from nl2br() and CSS something like this?

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

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

I'm trying to produce a list with the visual appearance created by a regular list like this:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

I am not adverse to doing this using PHP either.

Answer 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>

Answer 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>