.highlight-text {
    position: relative;
    display: inline-block;
    padding: 4px 8px;
    background: linear-gradient(
        to right,
        var(--hl-color) 50%,
        transparent 50%
    );
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.5s cubic-bezier(0.33, 1, 0.68, 1),
    color 0.3s ease 1s;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition-delay: 0.2s;
}

.highlight-text h2 , .highlight-text h1 , .highlight-text h3 , .highlight-text h4, .highlight-text p  {
    margin: 0;
}

/* When in view */
.hight-light-div.in-view .highlight-text {
    background-position: left bottom;
    color: #ffffff;
}