Home >Web Front-end >CSS Tutorial >Add borders to pagination using CSS

Add borders to pagination using CSS

PHPzforward: 2023-09-13 19:21:031018browse

使用 CSS 为分页添加边框

Use the border attribute to add a border to the page break.

Example

You can try running the following code to set the border for paging

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            display: inline-block;
         }
         .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 2s;
            border: 1px dashed orange;
         }
         .demo a.active {
            background-color: orange;
            color: white;
            border-radius: 5px;
         }
         .demo a:hover:not(.active) {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h2>Our Quizzes</h2>
      <div class = "demo">
         <a href = "prev.html">&amp;lt;</a>
         <a href = "quiz1.html">Quiz1</a>
         <a href = "quiz2.html">Quiz2</a>  
         <a href = "quiz3.html">Quiz3</a>
         <a href = "quiz4.html" class="active">Quiz4</a>
         <a href = "next.html">&amp;gt;</a>
      </div>
   </body>
</html>

The above is the detailed content of Add borders to pagination using CSS. For more information, please follow other related articles on the PHP Chinese website!

css border

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：CSS Flexbox layout moduleNext article：CSS Flexbox layout module

See more

Add borders to pagination using CSS

Example

Related articles