Блог

Я не хочу использовать или я не знаю, как использовать «CSS: после прототипа» с помощью javascript. Теперь я меняю его, добавляя высоту, а не ширину, и когда я удаляю прототип класса, возврат происходит за короткое время, без переноса. Что я могу для этого сделать? это моя ссылка на codepen

 <div class="block">
    <div id="top">my block/div>
    <div>
      <button id="btn">submit</button>
    </div>
  </div>
  

 .block {
      height: 200px;
      width: 250px;
      margin:150px auto;
      text-align: center;
    }
    #top {
      margin-bottom: 20px;
      height: 30px;
      display: inline-block;
      border-bottom: 3px solid;
      transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
    }
    .addtop {
      border-bottom: 3px solid blue;
      color: blue;
    }
  

 let btn = document.getElementById('btn');
    btn.addEventListener('click',() => {
      let topBlock = document.getElementById('top');
      if(topBlock.classList.length > 0) {
        topBlock.classList = [];
      } else {
        topBlock.classList.add('addtop');
      }
    });
  

Попробуйте это:

 document.getElementById('top');
  if(topBlock.classList.length > 0) {
    topBlock.classList.remove('addtop');
  } else {
    topBlock.classList.add('addtop');
  }
});
  

Также добавьте класс .top:

   border-bottom: 0px solid blue;