details summary 태그 마커에 회전효과 넣기

예시

멋진 아코디언 효과!

 

코드

details summary {cursor: pointer;}
details > summary::marker {display:none; content: '';}

details #toggle {
  transform: rotate(0);
  transition: .4s transform ease;
}
details[open] #toggle {
  transform: rotate(-180deg);
  transition: .2s transform ease;
}

 

 

Ref

---

• https://stackoverflow.com/questions/61292792/css-selector-for-details-element-when-opened
• https://stackoverflow.com/questions/77386169/styling-svg-summary-details-element-marker
• https://apost.dev/1026/