Bootstrap Pagination组件本身不包含“上一页/下一页”箭头图标，仅渲染数字页码及可选的«/»文本符号，这些是HTML实体而非CSS伪元素或SVG图标；所谓“箭头”通常源于手动添加的伪元素或误认的Dropdown三角箭头。
Bootstrap Pagination 分页组件没有箭头样式
直接说结论：pagination 组件本身**不包含“上一页/下一页”箭头图标**，它只渲染数字页码和可选的 « / » 文本符号（如 << 和 >>），这些是纯 html 实体，不是 css 伪元素或 svg 图标。
你看到的“箭头”，大概率来自以下两种情况之一：
- 你自己或团队在
.page-link里手动加了::before/::after伪元素 - 你实际想改的是
Dropdown（下拉菜单）的三角箭头，但误认为属于分页组件
如果确认是 Pagination 自带的 « / » 符号，那修改方式就是替换文本内容 + 控制字体/大小/间距，不是“改箭头”。
如何替换 Pagination 的「上一页/下一页」文字为自定义图标
Bootstrap 的 Pagination 支持用 <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> 这类结构。要换图标，关键是替掉 <span aria-hidden="true"> 里的内容。
- 用 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"/></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;
}
- 给「上一页」项加
class="page-item previous"，「下一页」加class="page-item next"，便于精准定位 - 用
::before/::after而不是改 HTML，方便主题切换 - 注意
content无法响应 CSS 变量中的 SVG 或 base64，只能用于字符串或 Unicode - 移动端需加
touch-action: manipulation防止点击延迟
最易被忽略的一点：Pagination 的「上/下一页」链接常被设为 disabled 状态，但很多人只改正常态样式，忘了同步处理 .page-item.disabled .page-link 下的图标透明度或灰阶，导致禁用时图标仍高亮。
