How can I highlight text with a background color not full height with the text, but aligned with the bottom instead of the top?

Question

So far I've got the highlight on hover working fine, I'm just trying to figure out how to reduce the height of the background but have it aligned with the bottom instead of the top. Here is my code:

HTML:

<div class="flex">
  <h2 class="highlight">Highlight Not Aligned with Bottom</h2>
</div>

CSS:

.flex {
  display: flex;
  justify-content: center;
}

.highlight {
    background: linear-gradient(to right, #efc169 50%, transparent 50%);
    height: 16px;
    background-size: 200% 50%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

.highlight:hover {
    background-position: left bottom; 
}

And a codepen to go with it:

https://codepen.io/devachievem/pen/eYgoWXO

Thanks for your help y'all!

Answer 1

Just add this line-height: 0; to the .highlight scope.