How to make a horizontal list span the width of its container element

horizontal-list-span-width.scss

// Thanks to CSS Tricks for the inspiration: http://css-tricks.com/equidistant-objects-with-css/

@mixin horizontal-list-span-width {
  margin: 0;
  padding: 0;
  list-style-type: none;

  text-align: justify;

  &:after {
    content: '';
    width: 100%;
    display: inline-block;
  }

  & > li {
    display: inline-block;
  }
}

// Usage
//
// 1. Assume the following markup:
//
// <div class="parent">
//   <ul class="items">
//     <li>Item 1</li>
//     <li>Item 2</li>
//     <li>Item 3</li>
//   </ul>
// </div>
//
// 2. We want the items to span the width of the parent. Equally spaced of course.

.items {
  @include horizontal-list-span-width;
}

// One issue I have with this solution is that it creates some space beneath ul.items that I cannot seem to remove.

Thank you, works perfect.