text-align: justify adding white space

Question

I've had a few projects where I've used text-align: justify; and it's ::after pseudo selector to evenly space each part of a horizontal nav or a footer or anything similar. However, to get everything looking right, I've had to hard-code the height of the parent of the justified content as well. That can get tedious when dealing with media queries and whatnot. Without a hard-coded height, having ::after in my stylesheet adds a blank space at the bottom of the parent. I've used the element inspector and whether I manually write it or not, the ::after has a 0 height, so I'm not sure what's causing it. Can anybody tell me how to get rid of it in the style without specifying a height?

* {
margin: 0;
padding: 0;
}

html, body {
    background: blue;
}

nav {
    background: lighten(blue, 20%);
    padding: 10px 30px;
    ul {
        list-style-type: none;
        display: inline-block;
        text-align: justify;
        width: 100%;
        &:after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
        }
        li {
            display: inline-block;
            a {
                font-family: Helvetica, sans-serif;
                font-size: 20px;
                color: darken(white, 10%);
                text-decoration: none;
            }
        }
    }
}

http://codepen.io/hiremarklittle/pen/pJmQJz?editors=110

Thanks guys

Answer 1

One of the downsides of inline-block elements is that the browser adds some whitespace around them. You can get around this by setting the font-size of the parent to 0. You then need to set the appropriate font-size on any children elements, otherwise they will inherit the font-size: 0 from the parent.

nav {
    font-size: 0;
}

Updated codepen: http://codepen.io/sdsanders/pen/xGNmGJ?editors=110