需要帮助减少CSS线高度，其中类型是歪斜+带边框底部下划线

Question

我正试图减少使用边框底部歪斜和加下划线的标题上的线高度。但是，调整行高会导致下划线靠近或位于我的类型后面。

.skewed { 
display: inline-block; 
font: 3em/1 poppins, sans-serif; 
border-bottom: 7px solid white; 
font-weight:600; 
letter-spacing: 2px; 
padding-bottom: 5px; 
color: white; 
margin-top: 1em; 
position: relative; 
-webkit-transform: rotate(-15deg) skew(-15deg, 0); 
    -moz-transform: rotate(-15deg) skew(-15deg, 0); 
    -ms-transform: rotate(-15deg) skew(-15deg, 0); 
    -o-transform: rotate(-15deg) skew(-15deg, 0); 
     transform: rotate(-15deg) skew(-15deg, 0); 
      text-transform: uppercase;} 

下面是我喜欢的类型：

<h1 class="skewed"><span>Nobody</span></h1> 
<br> 
<h1 class="skewed"><span>Ever Says</span></h1> 

下面是一个例子。任何想法如何收紧行高，同时保留粗线文字下划线？

Image example of headline

Answer 1

使用的利润率，而不是！

body{ 
 
    background-color:#aaa; 
 
} 
 
.skewed{ 
 
    text-align:center; 
 
} 
 
.skewed span{ 
 
    display:inline-block; 
 
    font-size:48px; 
 
    font-family:helvetica; 
 
    font-weight:bold; 
 
    text-transform:uppercase; 
 
    color:#fff; 
 
    border-bottom:7px solid #fff; 
 
    padding-bottom:5px; 
 
    margin-top:24px; 
 
    transform: rotate(-15deg) skew(-15deg, 0); 
 
}

<h1 class="skewed"><span>Nobody</span><br/><span>ever says</span><br/><span>seize</span><br/><span>tomorrow.</span></h1>