HTML SCSS ページネーション ボタンの間隔が均等に並ばない

HTML SCSSでレイアウトを組んだ ページネーション、ボタンの間隔が均等に並ばない

HTML

<div class="info-list-pagination"> <span class="info-list-pagination__btn info-list-pagination__current">{{ $page }}</span> <a href="{{ $url }}" class="info-list-pagination__btn info-list-pagination__link" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a> </div>

SCSS

.info-list-pagination { text-align: center; width: 100%; &__btn{ margin-right: 20px; } &__btn:last-of-type{ margin-right: 0; } &__current { background: #0079ea; color: #ffffff; display: inline-block; height: 30px; line-height: 1; padding: 6px 0; text-align: center; width: 30px; @include f(16, 'NotoSansJP-Medium', 25); } &__link { background: transparent; border: 1px solid #0079ea; color: #0079ea; display: inline-block; padding: 6px 0; text-align: center; width: 30px; @include f(16, 'NotoSansJP-Medium', 25); } &__link:hover { background: #0079ea; color: #ffffff; }}

currentページの<span>タグ、他のページネーションボタンの<a>タグそれぞれにclass="info-list-pagination__btn"を持たせて、margin-right:20px　を指定。
class="info-list-pagination__btn" last-of-typeにmargin-right:0を指定。

しかし、ブラウザーに表示すると、<span>タグにclass="pagination__btn:last-of-type" が当たっており、margin-right:0となってしまいます。。。。

<span> タグ、<a>タグにclass="info-list-pagination__btn"を与えているのになぜ<span>タグにclass="pagination__btn:last-of-type" となってしまうのでしょうか?