应同时使用details ::marker { display: none; }和details ::-moz-list-bullet { display: none; }隐藏原生三角，因浏览器实现不统一；更稳定方案是弃用原生符号，改用summary::after结合字符或border绘制可控箭头。
details标签的原生三角怎么隐藏
浏览器对 details 的三角符号实现不统一：Chrome 用 ::marker，Firefox 用 ::-moz-list-bullet，Safari 早期版本甚至不支持伪元素覆盖。直接写 details ::marker { display: none; } 在 Firefox 里无效，必须同时处理两个私有伪元素。
常见错误现象是只加了 ::marker，结果 Firefox 仍显示粗黑三角；或者用了 font-size: 0，但 Safari 下三角残留像素点。
- 必须同时写：
details ::marker+details ::-moz-list-bullet - 推荐用
display: none隐藏 Firefox 三角（比font-size: 0更彻底） - Chrome/Safari 中
::marker支持content替换，但 Firefox 不支持，所以自定义图形不能只靠它
用伪元素画一个可控的三角箭头
真正跨浏览器稳定的方案，是放弃修改原生三角，改用 summary::after 自绘。这样能完全控制方向、颜色、大小和动画，且不依赖浏览器对 ::marker 的支持程度。
使用场景：下拉菜单指示符、可折叠面板标题、响应式文档大纲。重点在于定位要准——summary 默认是 display: list-item，需先设 position: relative 才能让 ::after 绝对定位生效。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 基础右向箭头：
summary::after { content: "▶"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } - 旋转动画（展开时转为向下）：
details[open] summary::after { transform: translateY(-50%) rotate(90deg); } - 避免文字重叠：给
summary加padding-right: 24px，留出空间
用 border 技巧画纯 CSS 三角（非字符）
如果需要更精细的控制（比如等腰直角、抗锯齿、或与背景色融合），字符箭头不够用，就得回归 border 三角原理。注意：这里不是画在 summary 上，而是作为 summary::after 的内容，用零宽高 + 透明边框生成。
性能影响小，所有现代浏览器都支持；但要注意 border-width 决定大小，border-color 中仅一个方向设色，其余必须为 transparent，否则会变成梯形。
- 向下箭头（用于展开态）：
border-top: 6px solid #666; border-left: 6px solid transparent; border-right: 6px solid transparent; - 向右箭头（默认收起态）：
border-left: 6px solid #666; border-top: 6px solid transparent; border-bottom: 6px solid transparent; - 必须设
width: 0; height: 0;，否则边框会撑开容器
direction: rtl 是个捷径，但有坑
有人用 direction: rtl 把原生三角“挤”到右边，再配 text-align: right 让文字右对齐。这确实省事，但副作用明显：文本流反转会影响所有子内容（比如内嵌的 span 或图标），且在 RTL 语言页面中会进一步错乱。
更麻烦的是，direction: rtl 对 ::marker 的控制不稳定——Chrome 下有效，Firefox 下可能失效，Safari 下三角位置偏移。
- 仅适合纯中文/英文标题、无嵌套元素的简单场景
- 若用了
direction: rtl，记得给内部内容显式重置：summary > * { direction: ltr; } - 实际项目中，优先选
summary::after+ border 方案，逻辑清晰、行为可预测
最易被忽略的一点：无论用字符还是 border 画三角，都要测试 details[open] 切换时的过渡是否自然。很多动画卡顿，是因为忘了给 transform 或 opacity 加 will-change: transform;，尤其在移动端低性能设备上。
