An example of a pagination created with HTML <li> tag

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex {
        width: 400px;
        height: 80px;
        line-height: 80px;
        background-color: #eeeeee;
        position: absolute;
        top: 15%;
        left: 40%;
        margin: -25px 0 0 -150px;
      }
      .flex ul {
        display: flex;
        padding: 0;
        margin: 0;
        box-shadow: 0 10px 20px 0 #cccccc;
      }
      .flex ul li {
        flex: 1;
        list-style: none;
        text-align: center;
        position: relative;
        font-size: 20px;
        font-weight: bold;
        transition: 0.3s ease;
        cursor: pointer;
        user-select: none;
      }
      .flex ul li:hover {
        background-color: rgba(255, 255, 255, 0.25);
        color: #65bcc9;
      }
      .flex ul li:hover:nth-of-type(2) ~ .bar {
        left: 20%;
      }
      .flex ul li:hover:nth-of-type(3) ~ .bar {
        left: 40%;
      }
      .flex ul li:hover:nth-of-type(4) ~ .bar {
        left: 60%;
      }
      .flex ul li:hover:nth-of-type(5) ~ .bar {
        left: 80%;
      }
      .flex ul .bar {
        width: 20%;
        background-color: #2696a6;
        height: 5px;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: 0.3s ease;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <div class="bar"></div>
      </ul>
    </div>
  </body>
</html>