HTML details小三角等UI自定义实例页面

CSS代码：

.details-1 summary {
    width: -moz-fit-content;
    width: fit-content;
    direction: rtl;
}
.details-1 ::-webkit-details-marker {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}
.details-1 ::-moz-list-bullet {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}

.details-2 summary {
    padding: 5px;
    background-color: #f0f0f0;
}
.details-2 content {
    display: block;
    padding: 5px;
    background-color: #f5f7f7;
}
/* 自定义的三角 */
.details-2 summary::after {
    content: '';
    position: absolute;
    width: 1em; height: 1em;
    margin: .2em 0 0 .5ch;
    background: url(./arrow-on.svg) no-repeat;
    background-size: 100% 100%;
    transition: transform .2s;
}
.details-2:not([open]) summary::after {
    margin-top: .25em;
    transform: rotate(90deg);    
}
/* 隐藏默认三角 */
.details-2 ::-webkit-details-marker {
    display: none;
}
.details-2 ::-moz-list-bullet {
    font-size: 0;
}
                

HTML代码：

<details class="details-1" open>
    <summary>这是示例1</summary>
    <content>本案例展示对小三角UI重定义：包括显示在右侧，颜色减淡等。</content>
</details>

<details class="details-2" open>
    <summary>这是示例2</summary>
    <content>本案例隐藏原生小三角，使用自定义小三角。</content>
</details>