不同寬度的中間對齊（中央）邊框

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