如何将Bootstrap 5默认手风琴（accordion）图标设置为左对齐

我想要实现的效果如下：

当前实际实现的效果如下：

我已经尝试的修改方案：

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    float: left;
}

但添加float: left;的方案并没有生效。请问有什么可行的解决方案吗？

更新说明 #

按照Sato Takeru的建议移除margin-left: auto后，图标和文字的距离变近，但依旧是右对齐状态。

Bootstrap的.accordion-button本身是flex布局，flex子元素的float属性默认不生效，这是之前修改无效的核心原因。

直接修改伪元素的排列顺序和边距即可，完整修改代码如下：

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    /* 移除原有的margin-left: auto，改为右侧边距和文字拉开距离 */
    margin-right: 1rem;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    /* 调整flex顺序，让伪元素排在文字前面 */
    order: -1;
}

/* 如果需要调整展开时箭头的旋转方向，可以加下面这段 */
.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

修改后箭头会直接显示在文字左侧，符合预期效果。

内容的提问来源于stack exchange，提问作者Cheknov