Bootstrap 5 Accordion-移动图标的简单方式

Question

真的需要制作一个在左角而不是右角有图标的手风琴：示例

我可以在纯CSS Bootstrap5中完成吗，没有JS？

.accordion2-button:not(.collapsed)::after {
background-image: url("./icons/plus.svg");
box-shadow: none;
transform: rotate(-45deg);
}
.accordion2-button::after {
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-left: auto;
content: "";
background-image: url("./icons/plus.svg");
background-repeat: no-repeat;
background-size: 1rem;
box-shadow: none;
transition: transform 0.2s ease-in-out;
}

此处为HTML：

<p>
<a class="btn custom accordion2-button collapsed text-btns" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
Text</a>
</p>

Answer 1

Make<span class="icon2 collapsed"></span>

在文本之前-并将accordion2按钮的所有属性复制到新的类图标2