如何使文本hover下划线动画仅覆盖文本区域而非容器padding？

我把原本为按钮设计的下划线动画调整为普通文本动画，但遇到问题——文本所在容器带有左padding，hover时下划线动画会覆盖整个容器宽度（包含padding区域），希望动画仅覆盖实际文本所在区域。

我的代码： #

HTML：

<div class="sidebar-content">
    <ul>
        <li><a href="#" class="support-sidebar-area">Suporte <span class="material-symbols-outlined arrow4">chevron_right</span></a>
            <ul class="itens-support-hub">
                <li><a href="#" class="content-sidebar-area">Teste</a></li>
                <li><a href="#" class="content-sidebar-area">Teste</a></li>
                <li><a href="#" class="content-sidebar-area">Teste</a></li>
                <li><a href="#" class="content-sidebar-area">Teste</a></li>
                <li><a href="#" class="content-sidebar-area">Teste</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

.content-sidebar-area{
    font-size: 18px;
    font-family: Confortaa;
    line-height: 25px;
    background:
            linear-gradient(#151400 0 0) bottom / 0% 2px no-repeat
            #71c1ec;
    transition: 0.5s;
}
.content-sidebar-area:hover {
    background-size: 100% 2px;
}

解决方案： #

方案1：将元素设置为inline-block

给.content-sidebar-area添加display: inline-block，让元素宽度收缩到文本本身的宽度，这样background的100%就对应文本宽度，不会包含容器的padding：

.content-sidebar-area{
    font-size: 18px;
    font-family: Confortaa;
    line-height: 25px;
    background:
            linear-gradient(#151400 0 0) bottom / 0% 2px no-repeat
            #71c1ec;
    transition: 0.5s;
    display: inline-block; /* 新增这行 */
}
.content-sidebar-area:hover {
    background-size: 100% 2px;
}

方案2：给文本包裹内联元素

如果需要保持原元素的块级布局，可以给文本单独套一个<span>标签，把动画效果绑定到这个span上，完全不受容器padding影响：

修改后的HTML：

<li><a href="#" class="content-sidebar-area"><span>Teste</span></a></li>
<!-- 其他li标签同理修改 -->

对应的CSS：

.content-sidebar-area span{
    font-size: 18px;
    font-family: Confortaa;
    line-height: 25px;
    background:
            linear-gradient(#151400 0 0) bottom / 0% 2px no-repeat
            #71c1ec;
    transition: 0.5s;
}
.content-sidebar-area:hover span {
    background-size: 100% 2px;
}

内容的提问来源于stack exchange，提问作者Bazante