This is a simple line that should be drawn from left to right.

.row { height: 100px; width: 300px; background-color: #555556; } .row::before { background-color: #63ffd1; display: block; content: ''; height: 2px; width: 90%; position: absolute; margin-top: 110px } 
 <div class="row"> 

    1 answer 1

    As an option:

     .row { height: 100px; width: 300px; background-color: #555556; } .row::before { background-color: #63ffd1; display: block; content: ''; height: 2px; width: 90%; position: absolute; margin-top: 110px -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ animation: mymove 5s infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove { from {width: 0px;} to {width: 200px;} } @keyframes mymove { from {width: 0px;} to {width: 200px;} } 
     <div class="row"> 

    • How to hide an element until a certain point? So that it cannot be seen until the animation delay has passed the animation delay. And it turns out that the entire delay is visible, and then the animation disappears and passes. - Vladimir Kravchenko
    • one
      Found. This is animation-fill-mode: both. Thanks for the help - Vladimir Kravchenko
    • @ Vladimir Kravchenko found the solution themselves, - very well, or perhaps you can issue it right here, with a separate answer? I think this will be useful to many. - Alexandr_TT