JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<p class="larger-text">Expanding line Animation</p>
<div class="line"></div>

CSS

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

.larger-text {
  font-size: 32px;
}

.line {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-top: -5px;
  gap: 10px;
  text-align: center;
  border-top: 1px solid grey;
  animation: line 2s linear forwards;
}

.line:hover {
  border-top: 1px solid black;
}

@keyframes line {
  from {
    left: 50%;
    width: 0%;
  }
  to {
    left: 10%;
    width: 80%;
  }
}