默认箭头需用summary::-webkit-details-marker{content:none}和summary::marker{content:none}双写清除；自定义图标优先用::before并设display:inline-block；旋转动画须在summary::before上设transition:transform且配合details[open]状态；移动端需min-height+flex提升点击区域并消除iOS 300ms延迟。
summary 默认箭头怎么彻底去掉
浏览器给 summary 自动加的三角（或小箭头）是通过 ::marker 伪元素渲染的，不是普通 CSS 可直接覆盖的样式。不同内核处理方式不同：::-webkit-details-marker 在 Chrome/Safari 有效，summary::marker 是标准写法但 Firefox 目前不支持。
稳妥方案是双写：
summary::-webkit-details-marker { content: none; }
summary::marker { content: none; }
注意：content: none 比 display: none 更安全，不会破坏可访问性语义；别用 visibility: hidden，它仍占空间且屏幕阅读器可能误读。
自定义展开/收起图标用 ::before 还是 ::after
优先用 ::before：它默认在文字左侧插入，符合“标题前图标”的视觉直觉，且旋转动画更自然（比如 ▶ → ▼ → ▶）。用 ::after 虽然也能做，但容易和原生 ::marker 位置冲突，尤其当没清干净时会出现双图标。
立即学习“前端免费学习笔记（深入）”；
关键点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
summary::before必须设display: inline-block才能生效旋转 - 图标内容推荐用 Unicode 字符（如
"▶"、"▼"）或 SVG base64（避免字体加载失败） - 过渡只对
transform生效，别写transition: content——它不触发重绘
details[open] 下的图标旋转动画为啥不生效
常见原因是没加 transition 或写错选择器。旋转必须同时满足三个条件：
- 在
summary::before上声明transition: transform 0.2s ease - 初始状态设
transform: rotate(0deg) - 收起态用
details:not([open]) summary::before或直接写默认态，展开态用details[open] summary::before { transform: rotate(90deg); }
别依赖 :hover 或 :focus 触发旋转——它们和 open 状态无关，用户用空格键展开时不会触发。
移动端点击区域太小导致点不中 summary
原生 summary 的可点击区域默认只包裹文字，手指一滑就失效。解决方法不是加 padding（会撑开文字行高），而是用 min-height + display: flex 对齐：
summary {
min-height: 44px;
display: flex;
align-items: center;
}
这样整个高度都响应点击，且不破坏文字垂直居中；如果用了 ::before 图标，记得给它加 margin-right: 8px 避免贴边。
真正容易被忽略的是：iOS Safari 对 details 的 touch 响应有 300ms 延迟，除非你已启用 viewport 的 touch-action: manipulation，否则第一次点击总感觉“卡一下”。
