我需要在垂直时间线下面显示新闻,下面的例子非常适合我正在寻找的东西我可以进一步修改我的要求,但我需要相同的英语和&阿拉伯语.英文版本：

https://codepen.io/jplhomer/pen/lgfus

@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;

}

}

}

我修改了CSS以使用RTL语言但是第一元素ul的指针显示右侧的箭头,我试图在左侧显示箭头.我尝试过一些东西,但是其中一个或另一个东西打破了