summary元素小三角样式自定义演示页面

展示

代码

• HTML：

  <h4>1. 小三角颜色变化</h4>
  <details open>
      <summary class="summary1">这是摘要</summary>
      <p>这里具体描述，标签相对随意。</p>
  </details>
  
  <h4>2. 小三角位置变化</h4>
  <details open>
      <summary class="summary2">这是摘要</summary>
      <p>这里具体描述，标签相对随意。</p>
  </details>
  
  <h4>3. 小三角字符替换</h4>
  <details open>
      <summary class="summary3">这是摘要</summary>
      <p>这里具体描述，标签相对随意。</p>
  </details>
  
  <h4>4. 小三角完全自定义</h4>
  <details open>
      <summary class="summary4">这是摘要</summary>
      <p>这里具体描述，标签相对随意。</p>
  </details>

• CSS：

  .summary1::marker {
      color: red;
  }
  .summary2 {
      width: fit-content;
      direction: rtl;
  }
  
  .summary3::marker {
      content: '👉';
  }
  [open] > .summary3::marker {
      content: '👇';
  }
  
  .summary4::marker {
      font-size: 0;
  }
  .summary4::after {
      content: '';
      position: absolute;
      width: 1em;
      height: 1em;
      margin: .2em 0 0 .5ch;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M472.064 272.448L72.832 671.68c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0s22.016-57.792 0-79.872L551.936 272.448c-22.08-22.016-57.792-22.016-79.872 0z' fill='%238a8a8a'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
      transform: rotate(90deg);
      transition: transform .2s;
  }
  [open] > .summary4::after {
      transform: rotate(180deg);
  }