<span aria-label="'Bem-vinda' which means 'Welcome'" class="explainer">
  <input aria-hidden="true" class="explainer__checkbox" id="explainer-id" name="explainer-id" type="checkbox">

  <label aria-hidden="true" class="explainer__label" data-text="Bem-vinda" data-explanation="Welcome" for="explainer-id">
    <span class="explainer__text">
      Bem-vinda
    </span>

    <span class="explainer__explanation">
      Welcome
    </span>
  </label>
</span>

<style>
  @media (prefers-reduced-motion: no-preference) {

    #explainer-id~.explainer__label::after,
    #explainer-id~.explainer__label::before {
      transition: max-width 0s linear 288ms;
    }

    #explainer-id:checked~.explainer__label::after,
    #explainer-id:checked~.explainer__label::before {
      transition: max-width 0s linear 224ms;
    }

    #explainer-id~.explainer__label .explainer__text {
      transition: width 224ms steps(7);
      transition-delay: 608ms;
    }

    #explainer-id~.explainer__label .explainer__explanation {
      transition: width 288ms steps(9);
      transition-delay: 0s;
    }

    #explainer-id:checked~.explainer__label .explainer__text {
      transition-delay: 0s;
    }

    #explainer-id:checked~.explainer__label .explainer__explanation {
      transition-delay: 544ms;
    }
  }
</style>

.explainer {
  border-bottom: 2px dashed;
  display: inline-block;
  white-space: nowrap;
}

.explainer:hover {
  border-bottom-style: solid;
}

.explainer__checkbox {
  height: 0;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 0;
}

.explainer__label {
  cursor: help;
}

.explainer__text,
.explainer__explanation {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.explainer__checkbox:checked ~ .explainer__label .explainer__text,
.explainer__checkbox:not(:checked) ~ .explainer__label .explainer__explanation {
  /* Visually hide elements on older browsers or for users who prefer no animations. */
  width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .explainer__label {
    position: relative;
  }

  /* Before and After pseudo element will be used as placeholders of the text */
  .explainer__label::after,
  .explainer__label::before {
    display: inline-block;
    opacity: 0;
    overflow: hidden;
    width: auto;
  }

  .explainer__label::before {
    content: attr(data-text);
    max-width: 420px;
  }

  .explainer__checkbox:checked ~ .explainer__label::before {
    /* Hide original placeholder text */
    max-width: 0;
  }

  .explainer__label::after {
    content: attr(data-explanation);
    max-width: 0;
  }

  .explainer__checkbox:checked ~ .explainer__label::after {
    /* Show explanation placeholder text */
    max-width: 420px;
  }

  .explainer__text,
  .explainer__explanation {
    /* Position the actual text absolute */
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 100%;
  }

  .explainer__text::after,
  .explainer__explanation::after {
    /* To add a more typing look we're adding a cursor here */
    background-color: transparent;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
  }

  .explainer:focus .explainer__text::after,
  .explainer:hover .explainer__text::after,
  .explainer__checkbox:focus ~ .explainer__label .explainer__text::after,
  .explainer:focus .explainer__text::after,
  .explainer:hover .explainer__text::after,
  .explainer__checkbox:focus ~ .explainer__label .explainer__text::after {
    animation: BLINKING 320ms step-end infinite alternate;
  }
}

@keyframes BLINKING {
  50% {
    background-color: currentColor;
  }
}