中间对齐（中心）不同宽度的边框

Question

如何将中间/中心对齐不同宽度的边框？

HTML

<div>
  <span class="large">This is </span><span class="small">a test!</span>
</div>

CSS

.large {
  border-bottom: 5px solid blue;
}
.small {
  border-bottom: 1px solid green
}

见这里： https://jsfiddle.net/ybgeL9rf/

我希望1px边框与5px边框（而不是顶部）的中间对齐。

Answer 1

将2px的填充底部添加到.small：

.large {
    border-bottom: 5px solid blue;
}
.small {
    padding-bottom: 2px;
    border-bottom: 1px solid green
}

Updated Fiddle