title: Before element for toggle switch
body: <p>This is driving me slightly insane, so I would appreciate any help. </p>
  
  <p>I'm trying to make a toggle switch that looks like there's a slab of colour underneath it that's only visible when the switch is on. </p>
  
  <p>So when the switch is clicked it slides out to the right (add some margin-left) and then when clicked again it slides back. As things stand I've got two lis next to each other, both absolute position, one on top of the other. I'm moving the top one. But even when they're on top of each other, the green background of the bottom one is <em>slightly</em> visible. It's driving me mad. I've tried overflow: hidden on all of the elements. </p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;ul class="post-list"&gt;
      &lt;li class="post-list__month"&gt;January&lt;/li&gt;
      &lt;li class="post-list__month--hidden"&gt;&lt;/li&gt;
  &lt;/ul&gt;  
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.post-list {
      list-style-type: none;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
  
      &amp; li {
          height: 8rem;
          border-radius: 1rem;
          transition: all .5s;
      }
  
      &amp;__month {
          font-size: 3rem;
  
          display: inline-block;
          position: absolute;
  
          background-color: white;
          border: 1px solid rgba(99, 71, 151, 0);
          padding: 2rem;
          z-index: 1;
  
          &amp;:hover {
              margin-left: 2rem;
              border: 1px solid rgba(99, 71, 151, 0.1);
          }
  
  
          &amp;--hidden {
              background-color: green;
              height: 100%;
              width: 7rem;
              border: 1px solid rgba(99, 71, 151, 0);
              overflow: hidden;
              z-index: 0;
          }
  
      }
  }
  </code></pre>
  
  <p>Link to fiddle: <a href="https://jsfiddle.net/ez8mcjtw/" rel="nofollow noreferrer">https://jsfiddle.net/ez8mcjtw/</a></p>