如何突出显示背景颜色不是文本全高但与底部而不是顶部对齐的文本？

Question

到目前为止，悬停效果很好，我只是想弄清楚如何降低背景的高度，但让它与底部而不是顶部对齐。这是我的代码：

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; 
}

还有与之配套的代码笔：

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

感谢大家的帮助！

Answer 1

只需将此 line-height: 0; 添加到 .highlight 范围即可。

如何突出显示背景颜色不是文本全高但与底部而不是顶部对齐的文本？

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

css

background

height

background-size