自定义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/