无<summary>元素时，如何替换<details>元素的展开图标？

兼容无

场景的完整CSS #

/* 处理带<summary>的<details> */
details>summary {
  list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details>summary::before {
    content: "\25ba";
    padding-right: 4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right: 4px;
    font-size: 80%;
}

/* 处理无<summary>的<details> */
details:not(:has(summary)) {
    position: relative;
    padding-left: 16px; /* 给图标预留空间 */
}

details:not(:has(summary))::before {
    content: "\25ba";
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 80%;
}

details[open]:not(:has(summary))::before {
    content: "\25bc";
}

/* 可选：隐藏默认的"Details"文本（按需使用） */
/* details:not(:has(summary)) {
    color: transparent;
}
details:not(:has(summary))::after {
    content: "自定义默认标题";
    position: absolute;
    left: 16px;
    top: 0;
    color: initial;
} */

完整示例（aa.html） #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<title>My Project</title>
<style>
details>summary {
  list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details>summary::before {
    content: "\25ba";
    padding-right: 4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right: 4px;
    font-size: 80%;
}

/* 新增无summary处理逻辑 */
details:not(:has(summary)) {
    position: relative;
    padding-left: 16px;
}

details:not(:has(summary))::before {
    content: "\25ba";
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 80%;
}

details[open]:not(:has(summary))::before {
    content: "\25bc";
}
</style>
</head>
<body>
  <details>
    <summary>摘要1</summary> 详情内容1
  </details>
  <details>
    无自定义摘要的详情内容
  </details>
</body>
</html>

关键说明 #

• 使用:not(:has(summary))选中未手动添加
  的

  元素，通过伪元素生成自定义图标。
• 给无
  的

  设置左内边距，避免图标和浏览器默认生成的“Details”文本重叠。
• 如果需要替换默认的“Details”文本，可以使用注释里的代码块自定义内容。

内容的提问来源于stack exchange，提问作者albert