JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">

  <head>
    <meta charset="UTF-8">
    <title>css hover</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <span class="link-btn3">read more</span>
  </body>

</html>

CSS

.link-btn3 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 25px;
      max-width: 100%;
      position: relative;
      background: transparent;
    }

    .link-btn3:before {
      content: '';
      display: inline-block;
      width: 50px;
      height: 1px;
      position: relative;
      top: -1px;
      margin-right: 19px;
      background: rgba(242, 2, 11);
      -moz-transition: all .851s cubic-bezier(0.25, 0.8, 0.25, 1);
      -o-transition: all .851s cubic-bezier(0.25, 0.8, 0.25, 1);
      -webkit-transition: all .51s cubic-bezier(0.25, 0.8, 0.25, 1);
      transition: all .851s cubic-bezier(0.25, 0.8, 0.25, 1);
      margin-left: 95px;
    }

    .link-btn3:hover:before {
      width: 145px;
      background: #828282;
      margin-left: 0px;
    }