длина нижней границы анимированной рамки от 0 до 100

Question

Мне нужно анимировать нижнюю границу элемента div с помощью анимации ключевых кадров без использования: before или: after или изменения текущей структуры HTML

div{
    padding:3px 6px;
    display:inline-block;
    position:relative;
    border-bottom: 2px solid black;
}

<div><h1>Lorem Ipsum</h1></div>

Answer 1

Использовать градиент:

div.box {
  padding: 3px 6px;
  display: inline-block;
  position: relative;
  background: linear-gradient(#000, #000) bottom/0% 2px no-repeat;
  transition:1s all;
}

div.box:hover {
  background-size: 100% 2px;
}

<div class="box">
  <h1>Lorem Ipsum</h1>
</div>

Answer 2

Вы можете смоделировать это, как показано ниже. Надеюсь, это поможет.

.container {
  padding: 3px 6px;
  display: inline-flex;
  flex-direction: column;
}

.underline {
  height: 2px;
  max-width: 0%;
  background-color: black;
  animation: drawBorder 2s ease forwards;
}

@keyframes drawBorder {
  from {
    max-width: 0%;
  }
  to {
    max-width: 100%;
  }
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <div class="underline"></div>
</div>