自定义列表样式不适用于自动换行答案

【问题标题】：custom list style not working with wordwrap自定义列表样式不适用于自动换行
【发布时间】：2016-05-13 19:49:17
【问题描述】：

我该如何解决这个问题？第 3 点应该与其他点一样，但在 wordwrap 之外它会产生问题.. wordwrap 应该与其他行一样具有相同的边距。出了什么问题？

这是后面的代码：

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

另一个问题见底部答案

【问题讨论】：

标签： css wordpress html-lists

【解决方案1】：

只需将图形绝对定位并添加一些分页到 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>

【讨论】：

【解决方案2】：

您在图片中看到的另一个问题。 padding-right 不适用于自动换行，如果我将位置更改为绝对，则填充将被删除。

在本站：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>

【讨论】：