сделать так, чтобы ширина псевдоэлемента с абсолютным позиционированием увеличивалась по мере того, как его содержимое не на ширину родительского элемента

Question

прямо сейчас я должен установить ширину для псевдоэлемента, однако разная длина текстов требует разной ширины

поведение по умолчанию это расширение как родительская ширина, и я пытаюсь избежать разрыва строки в его содержимом

Я знаю про пустое пространство: сейчас, но это что-то вроде хака

Разметка

<section id="mainNav">
    <div>
        <nav><a 
            class="darkBlue" href="www.google.com">
                <span data-hover="aaaa">aaa</span>
            </a><a
            class="grassGreen" href="www.google.com">
                <span data-hover="bbbb">bbb</span>
            </a><a
            class="red" href="www.google.com">
                <span data-hover="cccc">ccc</span>
            </a><a
            class="olive" href="www.google.com">
                <span data-hover="dddd">ddd</span>
            </a><a
            class="orange" href="www.google.com">
                <span data-hover="eeee">eee</span>
            </a><a
            class="oceanBlue" href="www.google.com">
                <span data-hover="ffff">fff</span>
            </a><a
            class="purple" href="www.google.com">
                <span data-hover="gggg">ggg</span>
            </a>
        </nav>
    </div>
</section><!-- //MAIN NAVIGATION// -->

Стиль

#mainNav {
    width: 100%;
    position: fixed;
    top: 46px;
    z-index: 2;
    height: 48px;
    background-color: #1a1a1a;
    color: #fff;
}
#mainNav > div {
    height: 48px;
    overflow: hidden;
}
#mainNav nav {
    margin-right: 35px;
}
#mainNav nav > a {
    position: relative;
    display: inline-block;
    font: 12px/49px "...";
    margin-right: 35px;
}
#mainNav nav > a:first-child {
    margin-right: 0;
}
#mainNav nav span {
    position: relative;
    display: inline-block;
    transition: transform 0.3s;
    z-index: 1;
}
#mainNav nav > a:hover span {
    transform: translateY(-100%)
}
#mainNav nav span:before {
    position: absolute;
    top: 100%;
    content: attr(data-hover);
    transition: background 0.3s;
    transform: translate3d(0,0,0);
    font-size: 16px;
    font-weight: 700;
}
#mainNav nav > a:hover span:before {
    background-color: transparent !important;
}
#mainNav .darkBlue span:before {
    background-color: #17729a;
    color: #3194bf;
    width: 92px;
    right: -12px;
}
#mainNav .grassGreen span:before {
    background-color: #4caf50;
    color: #4caf50;
    width: 116px;
    right: -15px;
}
#mainNav .red span:before {
    background-color: #e53935;
    color: #e53935;
    width: 74px;
    right: -9px;
}
#mainNav .olive span:before {
    background-color: #b5a92a;
    color: #b5a92a;
    width: 86px;
    right: -10px;
}
#mainNav .orange span:before {
    background-color: #ef6c00;
    color: #ef6c00;
    width: 78px;
    right: -9px;
}
#mainNav .oceanBlue span:before {
    background-color: #00bcd4;
    color: #00bcd4;
    width: 54px;
    right: -7px;
}
#mainNav .purple span:before {
    background-color: #8267ad;
    color: #8267ad;
    width: 73px;
    right: -8px;
}

также в Firefox У меня есть странная ошибка, которая делает текст на перерывах при наведении курсора, и когда я добавляю пару пикселей в ширину, это исправляет, но я ищу способ избежать установки ширины вообще