My menu is evenly distributed and looks like this:
HTML
<nav>
<ul>
<li><a href="">Home</a>
</li>
<li><a href="">About</a>
</li>
<li><a href="">Contact</a>
</li>
<li><a href="">Blog</a>
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
The navigation menu items fill the entire width of the bar, as shown in this fiddle: http://jsfiddle.net/SjDEX/.
However, there seems to be extra space below the menu items due to the ::after element increasing the height of the ul.
Is there a way to prevent the after element from occupying vertical space? Setting its height to 0 does not resolve the issue, and changing its display property to block or other values disrupts the layout.