カスタムリストスタイルがワードラップで機能しない

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"> 
 
\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 1

で答えを見るだけで、グラフィック絶対を配置し、TASEにいくつかのpaggingを追加：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

あなたが写真で見られるような別の問題。単語の折り返しのために補完権は機能しません。絶対的に位置を変更すると、補完は削除されます。このサイト上の

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