在網頁設計中，上一頁和下一頁按鈕是常見的元素。這些按鈕允許用戶在長列表或瀏覽頁面時輕松導航。在CSS中，我們可以使用偽元素和偽類來創建這些按鈕。

/* 上一頁樣式 */
.previous-page { 
display: inline-block;
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
.previous-page:hover {
text-decoration: none;
background-color: #f3f3f3;
}
.previous-page::before {
content: "\00ab"; /* 左箭頭 */
margin-right: 5px;
}
/* 下一頁樣式 */
.next-page { 
display: inline-block;
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
.next-page:hover {
text-decoration: none;
background-color: #f3f3f3;
}
.next-page::after {
content: "\00bb"; /* 右箭頭 */
margin-left: 5px;
}

我們使用偽元素`::before`和`::after`來添加左右箭頭，使按鈕看起來像實際的上一頁和下一頁按鈕。我們還使用偽類`:hover`來在用戶將鼠標懸停在按鈕上時更改其背景顏色。

為了使用這些按鈕，在HTML代碼中，我們只需添加包含想要顯示文本的``標簽即可：

上一頁下一頁

由于我們已經為這些類定義了樣式，上一頁和下一頁按鈕將按照樣式進行渲染。