CSS：在引导手风琴中仅旋转SVG图像，而不是按钮文本

我有一个按钮，在引导控制手风琴以下代码；没有用于此的自定义CSS：

<div class="accordion-header" id="headingOne">
     <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne">
       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
     </svg>
     <span class="label">Details</span>
     </button>
</div>

但这会旋转整个按钮，包括标签，这会导致相当尴尬的结果：

我不知道如何从这个转换中排除“标签”

tl；dr：目标是使收拢状态下的三角形与SVG中指定的三角形一致，而在未收拢状态下的三角形（但只有三角形，而不是文本）旋转90度。

试试这个

.accordion-header .btn.btn-link svg{ transform: rotate(90deg); }
.accordion-header .btn.btn-link.collapsed svg{ transform: rotate(0deg); }

我试过悬停，很好用

svg:hover{ -ms变换：旋转（90度）；/*IE 9*/ -webkit变换：旋转（90度）；/*Safari*/' 变换：旋转（90度）； }

你能把代码片段放进去吗？就是这样！谢谢，我想这很简单。。。。图像实际上是指向下方的，但经过反复的点击，它采用了正确的形式，但我将对此进行处理。

.accordion-header .btn.btn-link svg{ transform: rotate(90deg); }
.accordion-header .btn.btn-link.collapsed svg{ transform: rotate(0deg); }