Align elements for RTL language - html

Question

I need to show news in vertical timeline below example is perfect for what i am looking for this i can modify further to my requirement but i need same for English & Arabic language. English version : https://codepen.io/jplhomer/pen/lgfus
Modified version for Arabic (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;
}
}
}
I have modified CSS to work with RTL language but the pointer for the First Element ul is showing arrow on right side which i tried to show on left breaks the arrow. I tried few thing but one or the other thing breaks in this

Answer 1

I fixed it by making changes to
li:nth-child(odd) {
float: right;
&:before {
border-top: 1em solid $gray;
border-left: 1em solid transparent;
right: auto;
left: -1em;
}
}
Working solution: https://codepen.io/anon/pen/LboryL