work.suroh.tk/_includes/components/nav-link.webc

<span :category="category" :link="link" webc:nokeep><slot>█</slot></span>

<script type="module">
class NavLink extends HTMLElement {
  connectedCallback() {
    // remove whitespace
    const span = this.querySelector(':scope span')
    if (span) {
      span.nextSibling.remove()
    }
    this.nextSibling.remove()
  }
}

customElements.define('nav-link', NavLink)
</script>

<style webc:scoped>
:host {
  --color-solid: var(--primary-colour);
  --color-transparent: var(--primary-colour-25);
  display: flex;
  position: relative;
  color: var(--color-transparent);
  transition: color ease 0.5s;
}

:host:hover {
  color: var(--color-solid);
  transition: color ease 0.1s;
  cursor: pointer;
}

:host.active {
  color: var(--color-solid);
  transition: color 1s ease, padding-inline-end 1s ease;
}

:host::after {
  content: attr(data-name);
  display: block;
  max-width: 0px;
  overflow: hidden;
  transition: max-width 0.5s ease;
}

:host.active::after {
  padding-inline-start: 0.225em;
  max-width: 10em;
}
</style>