Animate hr отмечает вход и выход при наведении

Question

Я пытаюсь анимировать тег hr в теге привязки.По сути, я хочу, чтобы при наведении указателя мыши на тег привязки тег hr выдвигался вправо, а при перемещении мыши тег hr должен сдвигаться слева.

То, что я до сих пор делал, этоПри наведении указатель hr выдвигается влево, а не вправо, а при перемещении мыши он снова сдвигается влево.

Я хочу добиться чего-то вроде следующего:

Компонент кнопки

<Fragment>
    <Link className="btn" to={ this.props.linkTo }>
        <div>
            <span>{ this.props.text }</span>
            <hr/>
        </div>
    </Link>
</Fragment>

CSS

.btn {
    color: var(--black);
    text-decoration: none;
    display: flex;
}
.btn > div > span {
    line-height: 30px;
}
.btn > div > hr {
    margin: 0;
    border: 0;
    border-top: 2px solid var(--black);
    width: 100%;
    transition: width 0.2s ease-out;
}
.btn:hover div > hr {
    width: 0;
}

Answer 1

Для этого вы можете использовать свойство float.Вот простой пример с простым HTML.

div > hr {
  transition: width 1s ease-out; /* For Safari 3.1 to 6.0 */
  transition: width 1s  ease-out;
  width : 100%;
  float: left;
}
div:hover > hr {
   width:0%;
   float: right;
}

<div>
  <h2>
  Fooo Barrr
  </h2>
  <hr/>
</div>

Answer 2

Вы можете использовать свойство float вместе с border-style и height из hr.Вы также можете изменить background-color из hr.

См. Фрагмент ниже:

.container{
  display:inline-block;
  position:relative;
}
.container > span{
  cursor:pointer;
  font-size:20px;
}
.container > hr {
  transition: width 0.3s ease-out;
  width:100%;
  float:left;
  border-style: none;
  background: #000;
  height: 2px;
  margin:0;
}
.container:hover > hr {
  width:0%;
  float:right;
}

<div class="container">
  <span>See what we do</span>
  <hr/>
</div>

Answer 3

Float right приведет к переходу вправо, и когда он вернется, он также будет слева направо, очень похоже на изображение, которое вы разместили.

.btn: hoverdiv> hr {width: 0;плавать: правильно;}