details summary箭头移至右侧并垂直居中需先清除原生标记（summary::marker{content:none}及::-webkit-details-marker{display:none}），再设summary为flex容器（display:flex;justify-content:space-between;align-items:center），最后用summary::after插入箭头并支持旋转动画。
details summary箭头怎么移到右侧并垂直居中
直接靠 text-align: right 或 margin-left: auto 无效——原生箭头是伪元素，不参与普通文本流布局，必须用定位或 flex 手动“挪”。核心思路是：先隐藏默认箭头，再用 summary::after 插入新图标，并控制其位置。
- 原生箭头（
::-webkit-details-marker或::marker）默认在左侧、基线对齐，无法用text-align移动 -
summary默认是display: list-item，但浏览器实现差异大，不能依赖justify-content等 flex 行为 - 最稳的方式是：设
summary { display: flex; justify-content: space-between; align-items: center; }，把自定义图标放右侧容器里
用 flex 布局把自定义箭头塞进 summary 右侧
不用 hack 定位，也不用担心基线偏移。关键是把 summary 变成 flex 容器，文字放左侧，图标放右侧，天然垂直居中。
- HTML 保持原样：
<summary>标题</summary>，不加额外标签 - CSS 中先清掉原生标记：
summary::marker { content: none; }和summary::-webkit-details-marker { display: none; } - 然后启用 flex：
summary { display: flex; justify-content: space-between; align-items: center; padding-right: 12px; } - 用
summary::after插入箭头：summary::after { content: "▶"; transition: transform 0.2s ease; } - 展开时旋转：
details[open] summary::after { transform: rotate(90deg); }
为什么不能只用 position: absolute 挪箭头
看似简单，但容易出错：绝对定位依赖父级 position: relative，而 summary 的盒模型在不同浏览器中不一致；更麻烦的是，summary 高度随字体大小变化，top: 50%; transform: translateY(-50%) 在小字号或缩放下会失准。
- Chrome 旧版中
summary的行高计算异常，absolute定位常偏上 1–2px - Safari 对
summary的line-height继承行为不稳定，导致transform: translateY()不可靠 - 如果项目用了 CSS 重置（如
all: unset），summary会丢失默认display和vertical-align，absolute更难调
细节兼容性与可访问性提醒
右侧箭头只是视觉调整，不能破坏语义和可访问性。屏幕阅读器仍依赖 summary 文本和 details[open] 属性来播报状态，所以自定义图标仅作装饰，不可替代原生交互逻辑。
立即学习“前端免费学习笔记（深入）”；
- 别删掉
summary内的文字内容——它仍是键盘焦点和读屏器的唯一入口 - 避免给
summary::after加aria-hidden="false"，它不是交互目标，加了反而干扰读屏 - 如果设计要求箭头是 SVG 或 icon font，务必设
width/height和vertical-align: middle，否则在 Firefox 中可能下沉
::after 是目前最省心、最不易被未来浏览器更新破坏的方案。 
