Hacky (:before-reliant, overlapping positioned) equal columns

Similar to the old Faux Columns trick (http://www.alistapart.com/articles/fauxcolumns/), but utilizing pseudo-selectors and positioning for placement of generated backgrounds. Good for solid colour backgrounds, or situations where you need a border around your sidebar to go to the bottom of the page.

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu"></script>
<ul>
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, rutrum eu fringilla ut, gravida in tortor. Duis vel dui diam, vitae molestie mi.</p>
        <a href="#">Read More &gt;</a>
    </li>
    <li>
        <p>Maecenas sit amet mi ut velit laoreet condimentum. Cras sodales adipiscing diam sed aliquam. Nullam dapibus velit in nulla consequat scelerisque. Sed eu nulla a tellus tempus tincidunt. Vivamus gravida volutpat varius. Curabitur tristique velit nec tellus vulputate sed consequat lacus tempor. Aenean dapibus nibh ut purus malesuada accumsan. Nam vitae sem quis purus dapibus commodo.</p>
        <a href="#">Read More &gt;</a>
    </li>
    <li>
        <p>Donec varius bibendum consequat. Ut nec mauris sem, tincidunt pretium ligula. Curabitur quis nibh eget nisl eleifend accumsan vitae sit amet lacus. Ut sed nisl mi. Nulla eros eros, pellentesque a fringilla at, semper sed erat.</p>
        <a href="#">Read More &gt;</a>
    </li>
</ul>

SCSS

body {
  font: 12px Ubuntu, Arial, sans-serif;
  margin: 8px;
  color: rgba(30, 30, 30, .7);
}
ul {
  position: relative;
  border: 2px solid #ccc;
  padding: 2%;
  // Clearfix solution: http://colinaarts.com/articles/float-containment/
  &:after, &:before {
    content: quote('');
    display: table;
  }
 
  li {
    $column-width: 30%;
    float: left;
    width: $column-width;
    text-align: justify;
    margin-right: 5%;
    &:last-child {
      margin-right: 0;
    }
    &:before {
      content: quote('');
      position: absolute;
      top: 0;
      bottom: 0;
      width: 35%;
    }
    // Colors courtesy of: http://colorschemedesigner.com/#3r32kdt..w0w0
    &:nth-child(1):before {
      left: 0;
      background: #96C3D7;
    }
    &:nth-child(2):before {
      left: 33.3%;
      background: #FFF194;
    }
    &:nth-child(3):before {
      left: 66.7%;
      width: auto;
      right: 0;
      background: #E383A7;
    }
    > * {
      position: relative;
      z-index: 1;
    }
  }
}