CODEWITHSUNDEEP
csswordpresslist
Krystian
Krystian

Reputation: 987

custom list style not working with wordwrap, dont know why

Another problem like you see in the picture. The padding-right does not work for wordwrap and if I change position to absolute the padding is deleted.

enter image description here

on this site: http://neuronade.com/kopie-sdfsdf-3

ul.iconhaken li:before{
					content: '✔';
					color: green;
		                        font-weight: bold;
					margin-left: -1em;
					margin-right: .100em;
                                        padding-right: 5%;
                                        position: relative;
				}
				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>

Upvotes: 0

Views: 25

Answers (1)

kindisch
kindisch

Reputation: 776

You could set the checkmark to absolute element and set the padding on the li element:

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>

Upvotes: 1

Related Questions