需要帮助减少 CSS line-height 类型倾斜 + 下划线 border-bottom
Need help reducing CSS line-height where type is skewed + underlined with border-bottom
我正在尝试使用 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>
举个例子。有什么想法可以在保留粗文本下划线的同时收紧行高吗?
改用边距!
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>
我正在尝试使用 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>
举个例子。有什么想法可以在保留粗文本下划线的同时收紧行高吗?
改用边距!
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>