Bootstrap怎么修改Pagination分页组件的箭头样式-Bootstrap教程-PHP中文网

Bootstrap Pagination组件本身不包含“上一页/下一页”箭头图标，仅渲染数字页码及可选的«/»文本符号，这些是HTML实体而非CSS伪元素或SVG图标；所谓“箭头”通常源于手动添加的伪元素或误认的Dropdown三角箭头。

Bootstrap Pagination 分页组件没有箭头样式

直接说结论：pagination 组件本身**不包含“上一页/下一页”箭头图标**，它只渲染数字页码和可选的 « / » 文本符号（如 和 <code>>>），这些是纯 html 实体，不是 css 伪元素或 svg 图标。

你看到的“箭头”，大概率来自以下两种情况之一：

你自己或团队在 .page-link 里手动加了 ::before/::after 伪元素
你实际想改的是 Dropdown（下拉菜单）的三角箭头，但误认为属于分页组件

如果确认是 Pagination 自带的 « / » 符号，那修改方式就是替换文本内容 + 控制字体/大小/间距，不是“改箭头”。

如何替换 Pagination 的「上一页/下一页」文字为自定义图标

Bootstrap 的 Pagination 支持用 <li class="page-item">@#@#@#@#@#@#@#@#@#@0</li> 这类结构。要换图标，关键是替掉 <span aria-hidden="true"></span> 里的内容。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

用 Font Awesome：把 « 换成 <i class="fas fa-chevron-left"></i>，并确保图标字体已加载
用 inline SVG：替换为 <svg width="12" height="12" viewbox="0 0 16 16"><path d="M11.354 1.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L13.597 8 11.354 5.757a.5.5 0 0 1 0-.708z"></path></svg>
保留语义：aria-label="Previous" 和 aria-hidden="true" 必须保留，不能删
别漏掉响应式对齐：加 vertical-align: middle 或 display: inline-flex 防止图标和文字基线错位

为什么直接覆盖 `.page-link::after` 没效果

因为 Pagination 的 .page-link 默认**没有定义 ::after 伪元素**——那是 .dropdown-toggle 才有的行为。你在 DevTools 里看到的 ::after 样式，基本可以确定是其他组件（比如导航栏里的下拉按钮）泄漏过来的，或者项目里已有全局 CSS 干扰。

检查元素真实 class：右键「检查」，确认该节点是否真有 class="page-link"，且父级没混入 dropdown 相关类
清空干扰样式：临时在 DevTools 中禁用所有非 Bootstrap 的 CSS，看箭头是否还存在
搜索项目代码：grep -r "::after" src/ | grep -i "page-link\|pagination"，确认是否有自定义规则注入

如果真要统一控制分页方向符号的视觉风格

推荐用 CSS 变量 + 局部重置，而不是硬写伪元素。Bootstrap 5.3+ 不提供分页箭头变量，但你可以自己建一套：

:root {
  --bs-pagination-prev-icon: "«";
  --bs-pagination-next-icon: "»";
  --bs-pagination-icon-size: 1rem;
  --bs-pagination-icon-color: #4a6fa5;
}

.pagination .page-item.previous .page-link::before,
.pagination .page-item.next .page-link::after {
  content: var(--bs-pagination-prev-icon);
  font-size: var(--bs-pagination-icon-size);
  color: var(--bs-pagination-icon-color);
  margin-right: 0.25rem;
}