可以，但仅限chrome 120+、edge 120+和safari 18.0+，需先设list-style才能使summary::marker生效；firefox完全不支持。
details 元素的 summary 箭头能用 ::marker 改吗？
可以，但仅限部分浏览器，且必须配合 list-style 重置才能生效。Chrome 120+、Edge 120+ 和 Safari 18.0+ 支持对 <summary></summary> 使用 ::marker，Firefox 目前完全不支持（截至 128 版本）。
关键点是：默认情况下 <summary></summary> 不是 list item，::marker 不会自动出现；必须显式设置 list-style 才能触发它。
怎么让 ::marker 生效并替换箭头？
核心操作是给 <summary></summary> 加上 list-style，再用 ::marker 控制内容和样式。不能只写 ::marker 而不设 list-style，否则什么都不会变。
常见可行组合：
-
summary { list-style: none; }→ 移除默认箭头（最常用、兼容性最好） -
summary { list-style: "▶ "; }→ 自定义字符箭头（需注意空格和字体渲染） -
summary { list-style: "▸ "; }→ 更细的三角符号，视觉更轻 -
summary::marker { content: "?"; color: #666; }→ 在已启用list-style的前提下覆盖内容（如先设list-style: "▶ "）
为什么有时 ::marker 完全没反应？
大概率是以下三个原因中的一个：
- 没给
<summary></summary>设置任何list-style值（::marker是依附于list-style的伪元素） - 用了 Firefox —— 它把
<summary></summary>当作普通内联元素处理，无视::marker - 写了
summary::marker { display: none; }，但这个声明无效（::marker不支持display属性）
验证是否生效的小技巧：临时加一句 summary { list-style: "⚠ "; }，看是否立刻出现警告符号——如果没出现，说明浏览器根本不识别该规则。
更稳妥的自定义方案是什么？
绕过 ::marker 依赖，用纯 CSS 控制展开/收起状态 + 自定义图标：
summary {
list-style: none;
position: relative;
padding-left: 24px;
}
summary::before {
content: "▶";
position: absolute;
left: 0;
transition: transform 0.2s;
}
details[open] summary::before {
content: "▼";
}
这种写法兼容所有现代浏览器，包括 Firefox；还能自由控制位置、动画、颜色，不受 list-style 类型限制。真正难搞的其实是细节：比如 summary 默认是 display: list-item，某些旧版 Safari 下会影响 flex 布局，得手动设回 display: block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
