HTML:
.main-summary:before {
content : "+";
font-size : 2em;
padding : 0 0.5em;
display : inline-block;
transition : .5s;
color : grey;
transform : rotate(0deg);
}
summary:after {
padding : 0px .5em;
text-align : right;
float : right;
display : inline-block;
content : "∨";
font-size : .7em;
transition : .5s;
width : 90%;
font-weight : 700;
}<details>
<summary class="main-summary">
<p>Main summary</p>
</summary>
<details>
<summary>
<p>Text in summary</p>
</summary>
<p>123</p>
</details>
</details><details> tag so that the + sign 1 image flips over and becomes the closing icon X 2 image, and the ∨ at the end of <details> turned over and became an up arrow 3 image, but this is only for the open element, and not for all that are in the open tag.
1 image: 
2 image: 
3 image: 