默认箭头由浏览器用户代理样式表通过伪元素（如::marker或::before）注入，非HTML内容；需用CSS重置所有相关伪元素并扩展点击区域以保障可用性。
details标签默认箭头是怎么来的
浏览器对 <details> 的实现自带一个折叠/展开指示图标（通常是右向三角形），它不是HTML内容，而是用户代理样式表（UA stylesheet）注入的伪元素。不同浏览器渲染位置和形态略有差异：Chrome/Safari 用 ::marker，Firefox 用 ::before，Edge 现在也基本对齐 Chromium 行为。
这意味着你不能靠删 HTML 或改属性去掉它，必须用 CSS 覆盖 UA 样式。
彻底隐藏箭头的通用写法
关键不是“去掉”，而是“重置”所有可能生效的伪元素。只写一条 list-style: none 不够，因为现代浏览器已不依赖 list-style 控制这个箭头。
details {
list-style: none;
}
details::marker {
content: "";
}
details > summary {
list-style: none;
}
details > summary::marker {
content: "";
}-
details::marker是最直接有效的靶点（Chrome 100+、Safari 15.4+、Firefox 99+ 支持） -
details > summary::marker是兜底，防止某些旧版 Firefox 把 marker 挂在<summary>上 -
list-style: none对<details>和<summary>都设一遍，兼容更老版本（如 Chrome 89 之前）
用自定义图标替代默认箭头
想换图标？别用 background-image 覆盖整个 <summary>，容易破坏可访问性（屏幕阅读器仍会读“展开/收起”，但视觉上没反馈）。推荐用 ::after 插入可控图标：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
details > summary {
list-style: none;
position: relative;
padding-right: 24px;
}
details > summary::after {
content: "▶";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s;
}
details[open] > summary::after {
content: "▼";
}-
content: "▶"可换成 SVG data URL 或 Unicode 字符，但避免用字体图标（加载失败时空白） -
position: relative+absolute是为了精准定位，不影响文本流 - 必须加
details[open] > summary::after切换状态，否则无法反映展开逻辑
移动端点击区域变小怎么办
移除箭头后，<summary> 默认点击热区仅限文字部分，iOS Safari 尤其明显。用户点空白处没反应，体验断层。
details > summary {
display: block;
padding: 12px 16px;
}
/* 扩展可点击区域 */
details > summary::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
}-
display: block确保<summary>占满父容器宽度（默认 inline） -
::before伪元素撑满整个 summary 区域，且z-index: -1不遮挡文字 - 不要用
width: 100%+height: 100%，因为 summary 没明确高度，容易失效
箭头本身只是表层问题；真正卡点在于 UA 样式不可见、状态同步依赖 DOM 结构、移动端交互热区与视觉分离——这些细节不处理，自定义就只剩外观，没实际可用性。
