Css animation - with vertical line on a horizontal line

Question

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

I would like some help in figuring out how to add a vertical line at both ends when the animation stops.

Something like the attached image:

Can someone please help me with this?

Answer 1

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