Pagination

Sample:

Code:

<style>
  .pagination ol {
    display: flex;
    list-style: none;
    gap: 0.5em;
    margin: 0;
    padding: 0;
  }

  .pagination a {
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    text-decoration: none;
    width: 2em;
  }

  .pagination a:is([aria-current="page"], :hover, :focus-visible) {
    background-color: #3c843f;
    color: #ffffff;
  }
</style>

<nav aria-label="Select page" class="pagination">
  <ol>
    <li>
      <a href="/filter.html/1" aria-current="page">1</a>
    </li>
    <li>
      <a href="/filter.html/2">2</a>
    </li>
    <li>
      <a href="/filter.html/3">3</a>
    </li>
    <li>
      <a href="/filter.html/4">4</a>
    </li>
  </ol>
</nav>