有没有办法让flexbox等高列具有可变字体大小和字体系列的文本的基线字体对齐方式？

如何解决有没有办法让flexbox等高列具有可变字体大小和字体系列的文本的基线字体对齐方式？

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

简单示例：

.wrapper {
  height: 50px;
  display: flex;
  align-items: baseline;
}

.column {
  height: 100%;
  display: flex;
  align-items: center;
}

.span1,.span2 {
  height: 100%;
  display: inline-flex;
  align-items: flex-end;
}

.span1:hover,.span2:hover {
  background-color: gray;
}

.span1 {
  justify-content: flex-start;
  margin-right: 4px;
  font-size: 32px;
}

.span2 {
  justify-content: flex-end;
  margin-left: 4px;
  font-size: 8px;
}

<div class="wrapper">
  <div class="column">
    <span class="span1">Some content</span>
  </div>
  <div class="column">
    <span class="span2">Some content</span>
  </div
</div>

解决方法

您可以使用一个大的伪元素来模拟悬停效果，该伪元素将覆盖所有区域，从而创建相等的列幻觉：

.wrapper {
  display: flex;
  align-items: baseline;
  overflow:hidden;
}

.column {
  display: flex;
  align-items: center;
}
.column > span {
  position:relative;
  z-index:0;
}
.span1:hover::before,.span2:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-200px;
  bottom:-200px;
  left:0;
  right:0;
  background-color: gray;
}

.span1 {
  margin-right: 4px;
  font-size: 32px;
}

.span2 {
  margin-left: 4px;
  font-size: 8px;
}

<div class="wrapper">
  <div class="column">
    <span class="span1">Some content</span>
  </div>
  <div class="column">
    <span class="span2">Some content</span>
  </div>
</div>