I have an expanding line animation in css as can be seen in the

Can someone please help me with this ?

CodePudding user response：

Perhaps using pseudo elements

.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 */