设置边框的底部动画长度，范围从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

您可以如下进行模拟。希望有帮助。

.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>

Answer 2

使用渐变：

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>