benutzerdefinierte Liste Stil funktioniert nicht mit Wordwrap

Question

Wie kann ich das Problem beheben? Punkt 3 sollte wie die anderen sein, aber außerhalb des Wordwrap macht es Probleme. Auch der Wordwrap sollte den gleichen Rand haben wie die anderen Zeilen. Was läuft falsch?

Dies ist der Code hinter:

.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"> 
 
\t <li>Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang</li> 
 
\t <li>Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang</li> 
 
\t <li>Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.</li> 
 
</ol>

Ein weiteres Problem, siehe Antwort auf der Unterseite

Answer 1

nur die Grafik absolute Position und einige pagging zu tase hinzufügen : 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"> 
 
\t <li>Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang</li> 
 
\t <li>Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang</li> 
 
\t <li>Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.</li> 
 
</ol>

Answer 2

Ein weiteres Problem, wie man auf dem Bild zu sehen. Das Padding-Recht funktioniert nicht für Wordwrap und wenn ich die Position auf absolut ändere, wird das Padding gelöscht.

auf dieser Seite: http://neuronade.com/kopie-sdfsdf-3

ul.iconhaken li:before{ 
 
\t \t \t \t \t content: '✔'; 
 
\t \t \t \t \t color: green; 
 
\t \t       font-weight: bold; 
 
\t \t \t \t \t margin-left: -1em; 
 
\t \t \t \t \t margin-right: .100em; 
 
             padding-right: 5%; 
 
             position: relative; 
 
\t \t \t \t } 
 
\t \t \t \t ul.iconhaken { 
 
\t \t \t \t \t list-style-type: none; 
 
\t \t \t \t }

<ul class="iconhaken"> 
 
\t <li>Jede Uni hat Seelsorge-Stellen. Erkundige dich dort mal. Alternativ kannst du über folgende Website per Mail oder per Chat eine kostenlose Beratung erhalten.</li> 
 
\t <li>Jetzt bist du optimal auf deine Prüfungen vorbereitet. Also Ruhe bewahren und viel Erfolg!</li> 
 
</ul>