自定義html5中的details元素

html5中的details的功能很好，但是預設的樣式不好看…嘗試修改。

• ::-webkit-details-marker僞元素修改 summary前面的三角形
• summary的::before和::after僞類制作一個 + - 表示的開關
• 使用details的open屬性選擇器在開關之間進行卻換

下面是樣式檔案：

::-webkit-details-marker {
            display: none;
        }
        summary {
            position: relative;
            cursor: pointer;
        }
        summary::before, summary::after {
            width: .75em;
            height: 2px;
            position: absolute;
            top: 50%;
            right: 0;
            content: '';
            background-color: currentColor;
            text-align: right;
            transform: translateY(-50%);
            transition: transform .2s ease-in-out;
        }
        details[open] summary::after {
            transform: translateY(-50%) rotate(180deg);
        }

        summary::after {
            transform: translateY(-50%) rotate(90deg);
        }
           

下面是html代碼：

<details open>
    <summary>我是summary,點我可以展開</summary>
    <p>我是展開内容</p>
</details>
           

效果如下：

參考文獻：

https://codepen.io/jdsteinbach/full/GYmQjo/