Pagination

HTML

<div class="design-preview design-preview-pagination">
    <ul class="pagination text-center" role="navigation" aria-label="Pagination">
        <li class="pagination-previous disabled"><img src="images/Left-arrow-pagination.svg" alt="right arrow"/></li>
        <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
        <li><a href="#" aria-label="Page 2">2</a></li>
        <li><a href="#" aria-label="Page 3">3</a></li>
        <li><a href="#" aria-label="Page 4">4</a></li>
        <li><a href="#" aria-label="Page 5">5</a></li>
        <li><a href="#" aria-label="Page 6">6</a></li>
        <li><a href="#" aria-label="Page 7">7</a></li>
        <li><a href="#" aria-label="Page 8">8</a></li>
        <li><a href="#" aria-label="Page 9">9</a></li>
        <li><a href="#" aria-label="Page 10">10</a></li>
        <li class="pagination-next"><a href="#" aria-label="Next page"><img src="images/Right-arrow-pagination.svg" alt="right arrow"/></a></li>
    </ul>
</div>
                        

.pagination li {
    border: 1px solid $purple;
}

.pagination-previous a::before, .pagination-previous.disabled::before {
    display: none;
}

.pagination-next a::after, .pagination-next.disabled::after {
    display: none;
}

.pagination .current {
    background: $purple;
    color: white;
}