css - 将左边框移到右边框 CSS

Question

嗨，我有一个具有以下样式属性的 CSS 代码。

.spotlight{
    border-left: 21px solid #ffb80d;
}

我需要将聚光灯向右移动以进行 RTL 更改。我需要添加一个更改，例如

.locale-right-to-left .spotlight {
     border-right: 21px solid #ffb80d;
}

但是，如果我进行此更改，则文本两侧将出现 2 个聚光灯。有没有办法可以忽略border-left属性？

Answer 1

如果您使用：

element {
    direction:rtl;
}

然后从伪元素绘制边框：

element {
    direction:rtl;
}
element .spotlight{
    position:relative;
}
element .spotlight:before {
    position:absolute;
    left:auto;  /* no need*/
    right:auto; /* no need*/
    top:0;
    bottom:0;
    border-left: 21px solid #ffb80d;/* or border-right */
}

:before 的位置将传递方向

Answer 2

定义左边框 0

.locale-right-to-left .spotlight
{
   border-right: 21px solid #ffb80d;
   border-left: 0;
}

Answer 3

.locale-right-to-left .spotlight {
    border-right: 21px solid #ffb80d;
    border-left: 0;
}