html - 对齐 RTL 语言的元素

Question

我需要在垂直时间轴中显示新闻，下面的示例非常适合我正在寻找的内容，我可以根据我的要求进一步修改，但我需要同样的英语和阿拉伯语。英文版:https://codepen.io/jplhomer/pen/lgfus

阿拉伯语 (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;
    }
  }
}

我已修改 CSS 以使用 RTL 语言，但第一个元素 ul 的指针在右侧显示箭头，而我试图在左侧显示的箭头断开了箭头。我尝试了一些东西，但其中有一个或另一个坏了

Answer 1

我通过修改

来修复它

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

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

工作解决方案:https://codepen.io/anon/pen/LboryL