Создание HTML списков чисто в CSS

Question

Попытка облегчить другу-инвалиду возможность вводить контент на сайт, который я для него создал, без чрезмерного набора текста, есть ли способ в CSS создавать маркированные и упорядоченные списки, используя существующие разрывы строк или вкладки, вместо того, чтобы ставить в элементах списка? Эти примеры для неупорядоченных, но упорядоченные также необходимы.

Например, это:

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

. , , с br из nl2br () и CSS что-то вроде этого?

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

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

Я пытаюсь создать список с визуальным оформлением, созданным обычным списком, подобным этому:

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

Я не против того, чтобы делать это, используя PHP.

Answer 1

Вы можете приблизить это, используя фоновую окраску, где вы можете контролировать высоту каждой строки, установив 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>

Или, как показано ниже, если вы можете рассмотреть другой тег для разрыва строки, чем <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>

Еще одна хакерская идея (я настаиваю на хаки )

.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

используйте «до» для тега span, чтобы сделать пулю!

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