Пагинация с дополнительным пространством

Итак, после дальнейшего изучения этой проблемы моя проблема заключалась в создании различных веб-шрифтов Google, которые я использовал.

Для номеров страниц используется шрифт Lato, а для ссылок «Предыдущая» и «Следующая» — шрифт Oswald.

Каким-то образом высота строк и отступы, которые были у обоих шрифтов, конфликтовали, и я не мог заставить их хорошо сочетаться друг с другом.

Ссылки «Предыдущая» и «Следующая» и номера страниц имеют один и тот же назначенный класс номеров страниц. Поскольку это сгенерированный код, я не могу его изменить.

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

У меня также было несколько стрелок рядом со ссылками «Предыдущая» и «Следующая». Эти стрелки были абсолютно позиционированы, поэтому ни одна из проблем с высотой строки не применима.

Подумав, я решил пойти только со стрелами!

Теперь выравнивание исправлено, и я понимаю, что произошло.

HTML остается неизменным:

<div id="pagi">
    <div class="wrap">
        <a class="prev page-numbers" href="https://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a>
        <a class="page-numbers" href="https://joshrodg.com/test/inductees/">1</a>
        <span aria-current="page" class="page-numbers current">2</span>
        <a class="page-numbers" href="https://joshrodg.com/test/inductees/page/3/">3</a>
        <a class="page-numbers" href="https://joshrodg.com/test/inductees/page/4/">4</a>
        <span class="page-numbers dots">…</span>
        <a class="page-numbers" href="https://joshrodg.com/test/inductees/page/15/">15</a>
        <a class="next page-numbers" href="https://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a>
    </div>
</div>

CSS выглядит так:

#pagi {
    margin: 5px 20px 25px;
    text-align: center;
}

#pagi .wrap {
    background: #054872;
    display: inline-block;
    font-size: 0;
    overflow: hidden;
    position: relative;
}

#pagi .page-numbers {
    background: #CD1F31;
    display: inline-block;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 40px;
    padding: 0 10px;
    text-decoration: none;
}

#pagi .current {
    background: #fff;
    color: #CD1F31;
}

#pagi .next,
#pagi .prev {
    color: #fff;
    text-transform: uppercase;
}

#pagi .next {
    padding: 0 25px 0 16px;
}

#pagi .prev {
    padding: 0 16px 0 25px;
}

#pagi .left,
#pagi .right {
    background: #333;
    border-bottom: 21px solid transparent;
    border-top: 21px solid transparent;
    height: 0; 
    position: absolute;
    top: 0;
    width: 0;
}

#pagi .left {
    border-right: 12px solid #054872;
    left: 0;
}

#pagi .right {
    border-left: 12px solid #054872;
    right: 0;
}

#pagi .ion-android-arrow-dropleft,
#pagi .ion-android-arrow-dropright {
    display: inline-block;
    font-size: 30px;
    position: absolute;
    top: 6px;
}

#pagi .ion-android-arrow-dropleft {
    left: 18px;
}

#pagi .ion-android-arrow-dropright {
    right: 18px;
}

#pagi a:hover .ion-android-arrow-dropleft,
#pagi a:hover .ion-android-arrow-dropright {
    color: #fff;
}

#pagi a:hover {
    color: #ddd;
}

Есть и другие способы исправить это. Я мог бы указать ширину и абсолютно позиционировать свои ссылки «Предыдущая» и «Следующая», что также решило бы эту проблему из-за абсолютного позиционирования.

Но мне нравится это решение, и я думаю, что лучше просто не иметь предполагаемых ссылок «Предыдущая» и «Следующая», а просто показывать значки (указывая в соответствующих направлениях).

Спасибо,
Джош