需要帮助减少 CSS line-height 类型倾斜 + 下划线 border-bottom

Question

我正在尝试使用 border-bottom 减少偏斜和带下划线的标题上的 line-height。但是，调整 line-height 会导致下划线靠近或落后于我的类型。

.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>

需要帮助减少 CSS line-height 类型倾斜 + 下划线 border-bottom

Need help reducing CSS line-height where type is skewed + underlined with border-bottom

html

css

skew