css - 自定义列表样式不适用于 wordwrap

Question

我该如何解决这个问题？第 3 点应该与其他点一样，但在自动换行之外会产生问题。自动换行也应与其他行具有相同的边距。出了什么问题？

这是背后的代码:

.gruene-liste {
    list-style: none;
    counter-reset: gruene-liste-number;
}

.gruene-liste li { position: relative; margin-bottom: 20px;}

.gruene-liste li::before, .gruene-liste li::after {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  width: 30px;
  background: green;
  border-radius: 5px;
  font-size: 1.4em;
  color: #FFF;
  text-align: center;
  margin-left: -0.4em;
}

.gruene-liste li::before {
  content: counter(gruene-liste-number, decimal);
  counter-increment: gruene-liste-number;
  margin-right: 20px;
}

.gruene-liste li::after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  transform: rotate(45deg);
}

<ol class="gruene-liste">
	<li>Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang</li>
	<li>Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang</li>
	<li>Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.</li>
</ol>

另一个问题见底部答案

Answer 1

只需将图形定位为绝对位置并添加一些分页即可 :D

.gruene-liste {
    list-style: none;
    counter-reset: gruene-liste-number;
}

.gruene-liste li {
  position: relative;
  margin-bottom: 20px;
  padding: 5px 0 5px 30px; 
  line-height: 1.4em;
 }

.gruene-liste li::before, .gruene-liste li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display:inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  width: 30px;
  background: green;
  border-radius: 5px;
  font-size: 1.4em;
  color: #FFF;
  text-align: center;
  margin-left: -0.4em;
}

.gruene-liste li::before {
  content: counter(gruene-liste-number, decimal);
  counter-increment: gruene-liste-number;
  margin-right: 20px;
}

.gruene-liste li::after {
  content: '';
  z-index: -1;
  transform: rotate(45deg);
}

<ol class="gruene-liste">
	<li>Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang</li>
	<li>Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang</li>
	<li>Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.</li>
</ol>