水平线有3种颜色

Question

我希望创建一条具有以下3种颜色的水平线，如下所示。

到目前为止，我只能添加2种颜色...

 .border{
    position:absolute;
    width: 20%;
    height: 1px;
    background-color: grey;
}

 .border:before{
  content: '';
  display: block;
  border-bottom: 1px solid blue;
  width: 50%;
}

<span class="border"></span>