Использование значения свойства CSS ширины по размеру содержимого

Демонстрация работы горизонтального меню, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div class="basicnav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

CSS

.basicnav {
    background: #555;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.basicnav a {
    text-decoration: none;
    display: inline-block;
    padding: 1rem;
    border-bottom: none;
    text-transform: uppercase;
    color: #fff;
}
a:hover {
    border-bottom: 1px solid #333;
    color: #000;
}