Html 在css中创建带线的箭头

我正在尝试创建一个工作流程，在步骤之间需要一个箭头。我已经在步骤div中使用pseudo元素：after在步骤之间创建了一条线，但不知道如何在这条线的末尾放置箭头。到目前为止，我已经编写了以下代码`

。步骤项目{
显示器：flex；
flex-flow：行nowrap；
位置：相对位置；
证明内容：中心；
}
.步骤{
边缘：1米；
边界半径：10%；
身高：5公分；
填充：1rem；
宽度：7雷姆；
身高：4rem；
位置：相对位置；
颜色：#fff；
背景：线性梯度（45度，#00abff，#45e5c3）；
}
.步骤：之后{
内容：“；
位置：绝对位置；
高度：2倍；
宽度：22%；
顶部：2米；
左：-2米；
颜色：#00abff；
背景色：#00abff；
}
.步骤：第一个孩子：：之后{
内容：无；
显示：无；
}

项目1
项目2

线箭头
.盒子{
宽度：自动；
高度：400px；
利润率：4em20px；
边框：1px虚线；
位置：相对位置；
}
.直线箭头{
位置：绝对位置；
溢出：隐藏；
显示：内联块；
字体大小：12px；/*设置箭头的大小*/
宽度：4em；
高度：4em；
边缘顶部：-2米；
最高：50%；
}
.line-arrow.左{
边框顶部：1px实心#A9A9；
左边框：1px实心#A9A9；
变换：旋转（-54度）倾斜（-20度）；
左：20px；
}
.直线箭头{
边框顶部：1px实心#A9A9；
右边框：1px实心#A9A9；
变换：旋转（54度）倾斜（20度）；
右：20px；
}
.直线箭头：活动，
.line-arrow.active{
边框宽度：2倍；
}
.广场{
顶部：自动；
底部：10px；
}
.左{
变换：旋转（-45度）；
}
.square.对{
变换：旋转（45度）；
}
Md Rakibul hasan

我尝试使用content属性添加一个简单的箭头，但没有完全对齐。 希望能有帮助

.steps:after {
  content: ">";
  position: absolute;
  text-align: right;
  line-height: 2px;
  height: 2px;
  width: 22%;
  top: 2em;
  left: -2em;
  color: #00abff;
  background-color: #00abff;
}

我补充说

.steps:first-child::before {
    content: '▶︎';
    position: relative;
    display: block;
    left: calc(100% + 36px);
    color: #00abff;
    top: 8px;
}

到你的css。我认为它应该做你想做的事

链接到已编辑的小提琴：

改进当前代码的建议：

• 不要在

  上设置
  ：：after
  然后在第一个子项上隐藏
  ：：after
  ，而是将
  ：：after
  添加到
  ：第n个子项（2）
  

• 我认为在同一个元素上添加箭头的主体和箭头作为伪元素更直观（理想情况下是第一个，因为箭头通常是从起点到终点绘制的）

---

我知道如何制作箭头，我不想要这个。谢谢你的建议，但看起来不太好。虽然我会尝试用你给的代码做点什么。谢谢