HTML CCS自定义单选按钮从右到左

Question

我已经从右到左创建了自定义单选按钮 我使用了w3school的代码 custom radio button w3school 但是它不能像从右到左那样工作 那是广播的第一个圆圈和下一个文本

<span class="prfil-img"><img src="images/<?= $_SESSION['user_image'];?>" alt=""> </span> 

.radioContainer{
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 22px;
    user-select: none;
    padding-left: 30px;
    direction: rtl;
}
.radioContainer input {
    display:none;

}
.radioContainer .circle{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #eee;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;

}
.radioContainer:hover .circle{
    background-color: #ccc;
}
.radioContainer input:checked + .circle{
    background-color: #2196fc;
}
.radioContainer input:checked + .circle:after{
    content: "";
    width: 10px;
    height: 10px;
    background-color: white;
    position: absolute;
    border-radius: 50%;
    left:50%;
    top:50%; 
    transform: translate(-50%,-50%);
}

我想更改标签的方向或将所有单选按钮都放在div上，并从右到左设置div的方向，但这不起作用