Richten Sie Elemente für RTL Sprache aus

Question

Ich muss Nachrichten in vertikaler Zeitachse unten zeigen Beispiel ist perfekt für das, was ich suche das kann ich weiter zu meiner Anforderung ändern, aber ich brauche dasselbe für Englisch & arabische Sprache. Englisch Version: https://codepen.io/jplhomer/pen/lgfus

Modifizierte Version für Arabisch (RTL) https://codepen.io/anon/pen/LboryL

@import "compass/css3"; 

$gray: #dddddd; 

h1, h2, h3 { 
    font-weight: 300; 
} 

.container { 
    padding: 1em; 
} 

.timeline { 
    position: relative; 
    overflow: auto; 


    &:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 5px; 
    background: $gray; 
    right: 0; 
    } 

    h2 { 
    background: $gray; 
    max-width: 6em; 
    margin: 0 auto 1em; 
    padding: 0.5em; 
    text-align: center; 
    position: relative; 
    clear: both; 
    } 

    ul { 
    list-style: none; 
    padding: 0 1em 0 0 ; 
    z-index: 1; 
    } 

    li { 
    background: $gray; 
    padding: 1em; 
    margin-bottom: 1em; 
    position: relative; 
    direction:rtl; 
    text-align:right; 

    &:before { 
     content: ''; 
     width: 0; 
     height: 0; 
     border-top: 1em solid $gray; 
     border-right: 1em solid transparent; 
     position: absolute; 
     right: -1em; 
     top: 0; 
    } 
    } 

    h3 { 
    margin-top: 0; 
    } 

    time { 
    font-style: italic; 
    } 
} 

@media screen and (min-width: 40em) { 
    .container { 
    max-width: 1000px; 
    margin: 0 auto; 
    } 

    .timeline { 
    &:before { 
     left: 50%; 

    } 

    ul { 
     padding-left: 20px; 
     max-width: 700px; 
     margin: 0 auto; 

    } 

    li { 
     width: 42%; 
    } 

    li:nth-child(even) { 
     float: left; 
     margin-top: 2em; 
    } 

    li:nth-child(odd) { 
     float: right; 

     &:before { 
     border-top: 1em solid $gray; 
     border-right: 1em solid transparent; 
     left: auto; 
     right: -1em; 
     } 
    } 

    li:nth-of-type(2n+1) { 
     clear: both; 
    } 
    } 
} 

ich CSS geändert haben mit RTL Sprache, aber der Zeiger für das erste Element ul zeigt Pfeil auf der rechten Seite, die ich versuchte zu arbeiten links zeigen bricht den Pfeil. Ich habe versucht, einige Sache, aber eine oder die andere Sache, bricht in diesem

Answer 1

ich es

durch Änderungen fixiert

li:nth-child(odd) { 
    float: right; 

    &:before { 
    border-top: 1em solid $gray; 
    border-left: 1em solid transparent; 
    right: auto; 
    left: -1em; 
    } 
} 

Arbeitslösung: https://codepen.io/anon/pen/LboryL