How can I make an animation when the " " is flipped by 45 degrees with details open and the "close" symbol is obtained using only html and css

Html:

<details>
    <summary>Sites</summary>
    <p>Google</p>
    <p>YouTube</p>
</details>

CSS:

summary:before{
 content:" ";
}

CodePudding user response：

You may override defaut style of <summary> and use a transition.

possible example

summary {
  list-style: none;/* removes the default arrow */
}
summary:before {
  content: "\25b2";
  padding: 0 0.5em;
  transition: 0.25s;
  display: inline-block;
  transform: rotate(90deg);
}
[open] summary:before {
  transform: rotate(180deg);
}

<details>
  <summary>hello</summary>
  <p>the world!</p>
</details>