真正可靠的方式是用 details[open] summary::before 和 details summary::before 配合 list-style: none 实现加减号切换，chrome中 summary::marker 无效且无法响应状态变化。
summary标签默认不支持自动切换加减号，必须用CSS伪元素手动控制
浏览器对 summary 的样式支持非常有限，::marker 在部分浏览器（如Firefox）里能改符号，但Chrome/Edge默认忽略它，且无法区分展开/收起状态。真正可靠的方式是用 ::before 配合 details[open] 选择器做状态判断。
- 不能只靠
summary::marker—— 它在Chrome中完全不生效，且无法响应open状态变化 - 必须结合
details[open] summary::before和details summary::before两个规则分别定义收起/展开时的符号 - 为避免与原生箭头重叠，建议先用
list-style: none清除默认 marker
用CSS ::before实现加减号切换的最小可行写法
以下代码兼容 Chrome、Firefox、Safari（≥17.4），无需JS：
details summary {
list-style: none;
position: relative;
padding-left: 24px;
}
details summary::before {
content: "+";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
details[open] summary::before {
content: "−";
}
-
position: relative和absolute是为了精确定位符号，避免影响文本流 -
top: 50%; transform: translateY(-50%)实现垂直居中，比line-height更稳定 - 用减号字符
"−"（U+2212，不是短横-）视觉更协调；也可换成"−"或 Unicode ✕/✓，但需注意字体支持
遇到点击区域变小或符号偏移怎么办
常见现象是加号点击没反应，或符号和文字错位——本质是 summary 的默认 display 值和盒模型导致的。
- 确保
summary没被设成display: inline，否则position: absolute失效；推荐显式声明display: list-item或保持默认display: block - 如果加号被截断，检查父容器是否有
overflow: hidden，或summary上设置了过小的height/line-height - 移动端点击热区不够？给
summary加padding（比如padding: 8px 12px），不要只依赖图标区域
需要动画过渡效果时的注意事项
CSS transition 对 content 属性无效，所以不能直接给 ::before 的 content 加动画。但可以间接实现旋转/缩放类动效。
- 想让加号转成减号时带旋转？改用
transform: rotate(45deg)+scale(1.2)模拟“+”，再通过details[open] summary::before切换回rotate(0) - 避免在
details上设transition，因为open属性本身不触发 CSS 过渡；只能对summary内部可动画属性（如color、background、transform）做过渡 - 动画时间别超过 200ms，否则用户会感知延迟，违背原生
details的即时反馈预期
[open] 或忘了清 list-style 就会白忙活。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
