有人能帮我复制Mahindra号公路上的动画红线吗？
我试过使用css，但它不起作用.
我已经复制了现有的css，但我没有运气，这似乎是一个如此简单的事情，但我不能让它工作.
Edit:我已经让它工作了，但只有在悬停时，有没有办法自动做它？
以下是我的代码:
.content {
position: absolute;
width: 60%;
left: calc(5% + 0.75rem);
transform: translate(0, 0%);
top: 20%;
color: #000;
z-index: 2;
}
.content:before {
content: "";
display: block;
position: absolute;
width: 120px;
height: 8px;
background: #dd052b;
left: 0;
top: 50px;
transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
clip-path: inset(0 100% 0 0);
}
.content:after {
content: "";
display: block;
position: absolute;
width: 120px;
height: 8px;
background: #dd052b;
left: 0;
bottom: auto;
top: 50px;
transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
clip-path: inset(0 100% 0 0);
}
.content:hover:after {
clip-path: inset(0 0% 0 0);
transition: all 0.6s linear;
transition-delay: 1s;
}
.content:hover:before {
clip-path: inset(0 0% 0 0);
transition: all 0.6s linear;
transition-delay: 0s;
}<div class="content text-center text-lg-start active">
<small style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">ABOUT US</small>
<h1 class="heading font-medium font-size-tb" style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Planet, People, Trust</h1>
<p style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Committed to drive positive change across global markets and communities.</p>
</div>