カスタムリストスタイルがワードラップでは機能しない理由は分かりません

Question

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

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

Answer 1

あなたは絶対的な要素にチェックマークを設定し、li要素にパディングを設定できます

ul.iconhaken li { 
 
    position: relative; 
 
    padding-left: 5%; 
 
} 
 

 

 
ul.iconhaken li:before { 
 
    content: '✔'; 
 
    color: green; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
ul.iconhaken { 
 
    list-style-type: none; 
 
}

<ul class="iconhaken"> 
 
    <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> 
 
    <li>Jetzt bist du optimal auf deine Prüfungen vorbereitet. Also Ruhe bewahren und viel Erfolg!</li> 
 
</ul>