layui折叠面板箭头通过::before伪元素实现，可自定义unicode字符或layui-icon图标，并支持左右/上下朝向切换及右对齐、居中等位置调整，推荐纯css方案配合transform旋转实现动态效果。
Layui 折叠面板（.layui-collapse）默认使用右向三角箭头（▶）表示“未展开”，下向三角箭头（▼）表示“已展开”。这个箭头是通过 CSS 伪元素 ::before 插入的，不依赖图标字体或额外 HTML，因此修改朝向和位置只需覆盖对应样式即可。
修改箭头朝向（左右/上下切换）
默认箭头是 Unicode 字符 \25B6（▶）和 \25BC（▼）。你可以替换成任意字符，比如左向（◀）、上向（▲），甚至自定义图标（如 Font Awesome 或 layui-icon）：
- 在自定义 CSS 中重写
.layui-colla-title::before的content值 - 展开态用
.layui-colla-item.layui-colla-itemed区分，所以需分别设置两种状态 - 注意加
!important确保覆盖 Layui 默认样式（尤其在 layui.css 后加载时）
示例（改为左/右朝向）：
.layui-colla-title::before {
content: "\25C0" !important; /* 左向 ▲ 改为 ◀ */
margin-right: 8px;
}
.layui-colla-itemed > .layui-colla-title::before {
content: "\25B6" !important; /* 展开后变为 ▶ */
}调整箭头位置（靠左、居中、右侧对齐）
箭头默认在标题文字左侧，靠 margin-right 控制间距。若要右对齐或居中，不能只调 margin，而应结合 position 或 flex 布局：
- 右对齐：给
.layui-colla-title设display: flex; justify-content: space-between;，再把箭头设为order: 1或单独包裹进 标签 - 居中显示：移除
::before，改用text-align: center+ 内联块级箭头容器 - 避免影响点击区域：确保伪元素或新增元素不遮挡标题文本的可点击范围
简易右对齐方案（无需改 HTML）：
.layui-colla-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.layui-colla-title::before {
content: "\25C0";
margin: 0;
order: 1;
width: 20px;
text-align: center;
}
.layui-colla-itemed > .layui-colla-title::before {
content: "\25B6";
}用 layui-icon 替换原生箭头（更统一风格）
如果项目已引入 layui-icon 字体，可完全弃用 Unicode 字符，改用图标类：
- 先在标题内手动插入图标标签：
<i class="layui-icon layui-icon-right"></i> - 然后用 JS 动态切换类：
$(this).find('i').removeClass('layui-icon-right').addClass('layui-icon-down') - 或纯 CSS 控制：隐藏默认伪元素，用
.layui-colla-title i控制显隐
推荐方式（零 JS，纯 CSS）：
.layui-colla-title::before { display: none; }
.layui-colla-title i {
font-size: 14px;
margin-left: 6px;
}
.layui-colla-itemed > .layui-colla-title i {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}这样箭头随展开自动旋转 90°，视觉更自然。
