不能直接替换，唯一可靠方式是通过summary::marker伪元素使用content属性嵌入data URL编码的最小化SVG，现代浏览器已支持，需避免display: none、确保MIME类型正确且路径大小写敏感。
details标签里的summary文字能用CSS替换成SVG吗
不能直接替换。summary是内联级可替换元素，其文本内容不响应content属性——哪怕你给它加display: block，summary::before { content: url(...) }也会被浏览器忽略或错位。真正可控的入口只有summary::marker，它专为折叠指示符设计，且现代浏览器（Chrome 125+、Firefox 129+、Safari 16.4+）已稳定支持。
为什么不能对summary写background-image或::before插SVG
这两种方式看似可行，实则埋雷：
-
background-image在 Safari 下定位漂移严重——因为summary默认是display: list-item，而list-item的 marker 区域与背景区域逻辑分离，背景容易盖住文字或偏出热区 -
summary::before插入的图标会破坏原生点击区域：原生summary的可点击范围包含文字+右侧 marker 区域，::before生成的内容默认不参与该热区计算，导致边缘点击失效 - 内联 SVG（比如直接写
<svg>...</svg>在summary里）会干扰键盘导航顺序、引发读屏器重复播报、且基线对齐不可控
用data URL塞进summary::marker才是正解
必须走summary::marker { content: url("data:image/svg+xml,...") }这条路。关键点不是“能不能”，而是“怎么编码才不出错”：
- SVG 必须最小化：去掉
xmlns、version、注释、多余空格；只留<svg viewBox="0 0 10 10"><path d="M2 3l3 3 3-3"/></svg>这类结构 - 手动 URL 编码：把
换成<code>%3C，>换成%3E，双引号换成%22，空格换成%20；别依赖在线工具自动编码，有些会多转义斜杠造成解析失败 - 不要设
display: none——这会让读屏器丢失展开/折叠状态感知；要用content: ""配合padding-inline-start腾出空间，再用background补图标 - 若需不同状态显示不同图标（如展开时箭头向下），用
summary[open]::marker单独控制，别试图用 JS 切换 class 去驱动
外部SVG文件路径和MIME类型必须达标
即使你用了content: url("icon.svg")，只要服务器没配对 MIME 类型，或者你在本地双击打开 HTML，图标照样空白：
立即学习“前端免费学习笔记（深入）”；
- 必须通过 HTTP/HTTPS 提供服务（例如
localhost:3000），file://协议下所有 SVG 外链都会被浏览器静默拦截 - Nginx 需显式声明：
types { image/svg+xml svg svgz; }；Apache 要加AddType image/svg+xml .svg - 路径大小写敏感：Linux 服务器上
Icon.svg≠icon.svg，404 错误不会报在 Console，只会让content渲染为空白 - 如果 SVG 文件本身含跨域资源（比如引用了外部字体或图片），需确保其响应头带
Access-Control-Allow-Origin: *，否则content: url()加载失败
summary::marker这个伪元素里，不是写得越花哨越可靠，而是越贴近规范越稳。别绕开它去折腾::before或background——那些方案在 Safari 或读屏环境下，总有一处会掉链子。 
