CODEWITHSUNDEEP
csswordpresshtml-lists
Krystian
Krystian

Reputation: 987

custom list style not working with wordwrap

How can I fix the problem? point 3 should be like the others but out of the wordwrap it makes problems.. also the wordwrap should have the same margin like the other lines. What is going wrong?

enter image description here

this is the code behind:

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

Another problem see answer at the bottom

Upvotes: 3

Views: 83

Answers (2)

Krystian
Krystian

Reputation: 987

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

Victor Radu
Victor Radu

Reputation: 2292

just position the graphic absolute and add some pagging to tase :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>

Upvotes: 1

Related Questions