Craft CMS Pagination

arrow.svg

pagination.scss

.blogPagination {
  display: flex;
  justify-content: space-between;
  a {
    display: block;
    &:nth-child(odd):before {
      content: "";
      background-image: url('/theme/img/arrow.svg');
      width: 20px;
      height: 20px;
      position: absolute;
      transform: rotate(180deg);
      transform-origin: 50% 48%;
      margin-left: -30px;
    }
    &:nth-child(even):after {
      content: "";
      background-image: url('/theme/img/arrow.svg');
      width: 20px;
      height: 20px;
      position: absolute;
      margin-left: 10px;
    }
  }
}

Pagination.twig

{# Set parameters for prev/next elements list #}
{% set params = craft.entries.section('blogEntry').order('title asc') %}

{# Get the prev/next elements #}
{% set prevEntry = entry.getPrev(params) %}
{% set nextEntry = entry.getNext(params) %}

{# And make sure to only output the links if the element exists #}
<div class="blogPagination">
  {% if prevEntry %}
    <a href="{{ prevEntry.url }}">
      {{ prevEntry.title }}
    </a>
  {% endif %}
  {% if nextEntry %}
    <a href="{{ nextEntry.url }}">
      {{ nextEntry.title }}</a>
    {% endif %}
</div>