Syntax error Add space between pagination links with CSS

Add space between pagination links with CSS

You can try to run the following code to add space between pagination links with CSS:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            transition: background-color 2s;
            border: 1px solid orange;
         }
         .demo a.active {
            background-color: orange;
            color: white;
            border-radius: 5px;
         }
         .demo a:hover:not(.active) {
            background-color: yellow;
         }
         .demo a:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
         }
         .demo a:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
         }
      </style>
   </head>
   <body>
      <h2>Our Quizzes</h2>
      <div class = "demo">
         <a href = "prev.html"><</a>
         <a href = "quiz1.html">Quiz1</a>
         <a href = "quiz2.html">Quiz2</a>
         <a href = "quiz3.html" class = "active">Quiz3</a>
         <a href = "quiz4.html">Quiz4</a>
         <a href = "next.html">></a>
     </div>
   </body>
</html>
Updated on: 2020-06-24T11:20:34+05:30

405 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements