Toggle div's active state on button click, animating span visibility.

HTML

<div>
  <p>Some text here</p>
  <span></span>
</div>

<button>Toggle active state</button

CSS

body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

div p {
  margin-bottom: 4px;
}

div span {
  width: 100%;
  height: 4px;
  background: red;
  display: none;
  opacity: 0;
  transition: opacity 1000ms, display 1s allow-discrete;
}

div.is-active span {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

button {
  padding: 0.5rem 1rem;
}

JavaScript

const button = document.querySelector('button');
const div = document.querySelector('div');

button.addEventListener('click', function() {
  div.classList.toggle('is-active');
})