将左边框CSS移到右边框CSS

Question

Hi I have a CSS code with the following style property.

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

I need to move the spotlight to right for RTL changes.I need to add a change like

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

But if I make this change there will be 2 spotlights on both sides of the text. Is there a way where I can ignore the border-left property ?

Answer 1

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

Answer 2

Define border-left 0

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

Answer 3

If you use :

element {
    direction:rtl;
}

then draw your border from a pseudo-element:

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

The position of :before will relay on direction