CodePen Embed - Pure CSS3 Responsive Pagination

<div class="container xlarge">
  <div class="pagination">
      <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="active"><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
      </ul>
  </div>
</div>

<div class="container large">
  <div class="pagination">
      <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="active"><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
      </ul>
  </div>
</div>

<div class="container middle">
  <div class="pagination">
      <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="active"><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
      </ul>
  </div>
</div>

<div class="container middle">
  <div class="pagination">
      <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="active"><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
      </ul>
  </div>
</div>

<div class="container small">
  <div class="pagination">
      <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="active"><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
      </ul>
  </div>
</div>

<div class="container xsmall">
  <div class="pagination">
      <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li class="active"><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
      </ul>
  </div>
</div>

$main-color: #f0f0f0;
$secondary-color: #1d1f20;

 @mixin display-child($n) {
    @for $i from 2 through $n {
      &:nth-child(#{$i}) {
        a {
          display: inline-block;
        }
      }
    }
 }

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  color: #fff;
  background: #949c4e;
  background: linear-gradient(
    115deg,
    rgba(86, 216, 228, 1) 10%,
    rgba(159, 1, 234, 1) 90%
  );
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  min-height: 100vh;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background: lighten($main-color, 5%);
  padding: 1rem;
  margin: 3rem auto;
  border-radius: 0.2rem;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
  counter-reset: pagination;
  text-align: center;
  &:after {
    clear: both;
    content: "";
    display: table;
  }
  ul {
    width: 100%;
  }
}

.xlarge {
  width: 65rem;
}

.large {
  width: 45rem;
}

.middle {
  width: 32rem;
}

.small {
  width: 22rem;
}

.xsmall {
  width: 14rem;
}

ul, li {
  list-style: none;
  display: inline;
  padding-left: 0px;
}

li {
  counter-increment: pagination;
  &:hover {
    a {
      color: lighten($main-color, 5%);
      background-color: $secondary-color;
      border: solid 1px $secondary-color;
    }
  }
  &.active {
    a {
      color: lighten($main-color, 5%);
      background-color: $secondary-color;
      border: solid 1px $secondary-color;
    }
  }
  &:first-child {
    float: left;
    a {
      &:after {
        content: "Previous";
      }
    }
  }
  &:nth-child(2) {
    counter-reset: pagination;
  }
  &:last-child {
    float: right;
    a {
      &:after {
        content: "Next";
      }
    }
  }
  a {
    border: solid 1px darken($main-color, 10%);
    border-radius: 0.2rem;
    color: darken($main-color, 45%);
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    padding: 0.5rem 0.9rem;
  }
  a:after {
    content: " " counter(pagination) " ";
  }
}

.large {
  li {
    a {
      display: none;
    }
    &:first-child {
      a {
        display: inline-block;
      }
      a:after {
        content: "Previous";
      }
    }
    @include display-child(8);
    &:last-child {
      a {
        display: inline-block;
      }
      a:after {
        content: "Next";
      }
    }
    &:nth-last-child(2) {
      a {
        display: inline-block;
      }
    }
    &:nth-last-child(3) {
      display: inline-block;
      &:after {
        padding: 0 1rem;
        content: "...";
      }
    }
  }
}

.middle {
  li {
    a {
      display: none;
    }
    &:first-child {
      a {
        display: inline-block;
      }
      a:after {
        content: "<";
      }
    }
    &:last-child {
      a {
        display: inline-block;
      }
      a:after {
        content: ">";
      }
    }
    @include display-child(5);
    &:nth-last-child(2) {
      a {
        display: inline-block;
      }
    }
    &:nth-last-child(3) {
      display: inline-block;
      &:after {
        padding: 0 1rem;
        content: "...";
      }
    }
  }
}

.small {
  li {
    display: none;
    &:first-child {
      width: 50%;
      display: inline;
      a:after {
        content: "Previous Page";
      }
    }
    &:last-child {
      display: inline;
      a:after {
        content: "Next Page";
      }
    }
  }
}

.xsmall {
  li {
    display: none;
    &.active {
      display: inline;
    }
    &:first-child {
      display: inline;
      a:after {
        content: "Prev";
       }
    }
    &:last-child {
      display: inline;
      a:after {
        content: "Next";
      }
    }
  }
}

View Compiled

This Pen is owned by Béla Varga on CodePen.

See more by @netzzwerg on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.