Ink Highlight

<p class="ink-sentence">
  Ship <mark class="ink-highlight">beautiful</mark> interfaces without the busywork.
</p>


<style>
.ink-sentence {
  max-width: 26ch;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: #f4f5fb;
}

.ink-highlight {
  position: relative;
  padding: 0 0.15em;
  color: inherit;
  background:
    linear-gradient(100deg, rgba(167, 139, 250, 0.55), rgba(244, 114, 182, 0.55), rgba(103, 232, 249, 0.55))
      no-repeat left bottom / 100% 0.42em;
  border-radius: 0.2em;
  transition: background-size 0.35s ease;
}

.ink-highlight:hover {
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ink-highlight {
    transition: none;
  }
}

</style>