title: custom list style not working with wordwrap
body: <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/OUaC0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OUaC0.png" alt="enter image description here"></a></p>
  
  <p>this is the code behind:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol class="gruene-liste"&gt;
   &lt;li&gt;Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang&lt;/li&gt;
   &lt;li&gt;Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang&lt;/li&gt;
   &lt;li&gt;Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.&lt;/li&gt;
  &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Another problem see answer at the bottom</p>