Search Pagination

<ul class="search-pagination">

    <li class="search-pagination__item  search-pagination__item--step">

        <a class="search-pagination__control" href="#link-to-previous-results">

            <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" title="Previous results">

                <title>Previous results</title>

                <use xlink:href="#svg-icon-chevron-left" />

            </svg>

        </a>

    <!-- /li -->

    <li class="search-pagination__item search-pagination__item--link">

        <a class="search-pagination__control" href="#link-to-page-1">

                1

            </a>

    <!-- /li -->

    <li class="search-pagination__item search-pagination__item--link">

        <a class="search-pagination__control" href="#link-to-page-2">

                2

            </a>

    <!-- /li -->

    <li class="search-pagination__item">

        <span class="search-pagination__control  search-pagination__control--active">

                3

            </span>

    <!-- /li -->

    <li class="search-pagination__item search-pagination__item--link">

        <a class="search-pagination__control" href="#link-to-page-4">

                4

            </a>

    <!-- /li -->

    <li class="search-pagination__item search-pagination__item--link">

        <a class="search-pagination__control" href="#link-to-page-5">

                5

            </a>

    <!-- /li -->

    <li class="search-pagination__item  search-pagination__item--step">

        <a class="search-pagination__control" href="#link-to-next-results">

            <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" title="Next results">

                <title>Next results</title>

                <use xlink:href="#svg-icon-chevron-right" />

            </svg>

        </a>

    <!-- /li -->

</ul>