Css animation - 水平線上有垂直線

Question

如演示鏈接所示，我在 css 中有一條擴展線 animation

當 animation 停止時，我想知道如何在兩端添加一條垂直線。

類似於附圖：

有人可以幫我嗎？

Answer 1

也許使用偽元素

.line::before,
.line::after
{
  content: ''; /* important for pseudo elements */
  width: 4px;
  height: 20px;
  position: absolute;
  background: red;
}
.line::after { right: 0 } /* snap to right */
.line::before { left: 0 } /* snap to left */