.underline-inline {
  background-image: linear-gradient(to right, var(--underline-color, var(--global-palette1)) 0, var(--underline-color, var(--global-palette1)) 100%);
  background-size: 0% 27%;
  display: inline;
  background-position: left 90%;
  background-repeat: no-repeat;
}

.underline-inline.is-visible {
  animation: underline-fill 0.6s ease forwards;
}

.block-editor-rich-text__editable .underline-inline {
    background-size: 100% 27%;
}

@keyframes underline-fill {
  from {
    background-size: 0% 27%;
  }
  to {
    background-size: 100% 27%;
  }
}