我想得到這樣的東西：
這是當前的結果：
我試過的：
.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='#212529'%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;沒有奏效。
有任何想法嗎？
這是一個
uj5u.com熱心網友回復：
您可以使用 flexorder屬性
.accordion-button:after {
order: -1; //swap order
margin-left: 0;
margin-right:0.5em; // just extra space between text and icon
}
uj5u.com熱心網友回復：
您可以撰寫一個自定義類來將偽更改為::before并洗掉margin-left.
注意：
您必須隱藏::after偽元素。
例如：
.myaccordion .accordion-button::before {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
content: "";
background-image: url(data:image/svg xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#212529'%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;
}
.accordion-button::after {display: none !important;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/347986.html