Javascript 有没有办法让flexbox等高列与不同字体大小和字体系列的文本的基线字体对齐？

相等的高度和基线不是问题。但是，如果我希望在显示不同字体大小的文本的元素上使用悬停效果，则会将其移出对齐状态。我愿意使用Javascript或任何其他解决方案，但是我很难找到一种方法来修复具有悬停效果的元素，以便在应用基线时它不会偏离对齐

简单的例子：

.wrapper{
高度：50px；
显示器：flex；
调整项目：基线；
}
.栏目{
身高：100%；
显示器：flex；
对齐项目：居中；
}
.span1、.span2{
身高：100%；
显示：内联flex；
对齐项目：柔性端；
}
.span1:悬停，.span2:悬停{
背景颜色：灰色；
}
.span1{
调整内容：灵活启动；
保证金权利：4px；
字体大小：32px；
}
.span2{
证明内容：柔性端；
左边距：4倍；
字号：8px；
}

一些内容
一些内容
您可以使用一个大的伪元素来模拟悬停效果，该元素将覆盖所有区域，从而产生相等列的错觉：


.wrapper{
显示器：flex；
调整项目：基线；
溢出：隐藏；
}
.栏目{
显示器：flex；
对齐项目：居中；
}
.column>span{
位置：相对位置；
z指数：0；
}
.span1:悬停：：之前，
.span2:悬停：：之前{
内容：“；
位置：绝对位置；
z指数：-1；
顶部：-200px；
底部：-200px；
左：0；
右：0；
背景颜色：灰色；
}
.span1{
保证金权利：4px；
字体大小：32px；
}
.span2{
左边距：4倍；
字号：8px；
}

一些内容
一些内容