使用ngFor时下面的CSS字幕文本彼此堆叠

Question

尝试使用CSS创建字幕，我设法使其正常工作，但没有达到我的期望。 当我使用ngFor提供数据时。

这是我得到的结果

文本互为掩护，现在我被卡住了，我不知道如何解决。

这是有效的链接https://stackblitz.com/edit/angular-mzstvh

这是我的HTML

<div class="message-alert ">
<div  class="container pr-0 pl-0 marquee" >
      <div>
          <a *ngFor="let text of messages">
                    {{text}}
          </a>
      </div>
</div>
</div>

这是SCSS

.message-alert {
  border-style: solid ;
  height: 70px;
  background-color: $light_gray;
  font-size: 28px;
  padding-top: 15px;

  &:hover{
    .marquee div {
      display: block;
      width: 200%;
      height: 50px;
      position: absolute;
      overflow: hidden;
      animation-play-state:paused;
    }
  }

  .marquee {
    height: 30px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .marquee div {
    display: block;
    width: 200%;
    height: 50px;
    position: absolute;
    overflow: hidden;
    animation: marquee 20s linear infinite;
  }

  .marquee a{
    float: left;
    width: 50%;
  }
  @keyframes marquee {
    0% {
      left: 100%;
    } 

    95% {
      left: -100%;
    }

    100% {
      left: -100%;
    }
  }
}

文本应向左移动，并且不能互相下方。 对不起，我的英语不好。

Answer 1

可以在HTML：https://stackblitz.com/edit/angular-rzavqc

中使用marquee标签