Question

您好我有一个带有以下样式属性的CSS代码。

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

我需要将聚光灯移到右侧以进行RTL更改。我需要添加类似

的更改

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

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

Answer 1

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

Answer 2

定义border-left 0

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

Answer 3

如果您使用：

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 */
}

以前的位置：将继续指示方向

将边框左移到边框右边的CSS

3 个答案: