我正在嘗試在 g 之后開始的標題中添加風格化的下劃線。請參閱圖片了解我的意思。
我已經嘗試了我能想到的一切，并在互聯網上搜索了答案，但到目前為止還沒有運氣。
這就是我現在的樣子
這就是它需要的樣子
這是我到目前為止所得到的：
<h1>get your meow on</h1>
.App-header h1 {
color: #394CED;
font-size: 33px;
font-weight: bold;
text-decoration: underline;
text-underline-offset: 2%;
text-decoration-color: #00D8D6;
text-decoration-thickness: 4px;
text-decoration-skip-ink: none;
font-weight: 600;
padding-bottom: 10px;
}
我不能只更改跳過墨水，因為我需要它通過 Y 下方。
uj5u.com熱心網友回復：
您可能需要將整個文本包裝在 a 中span并對其應用所有文本裝飾，并將第一個字母與該跨度分開，如下所示：
span {
text-decoration: underline;
text-underline-offset: 2%;
text-decoration-color: #00D8D6;
text-decoration-thickness: 4px;
text-decoration-skip-ink: none;
}
h1{
color: #394CED;
font-size: 33px;
font-weight: bold;
font-weight: 600;
padding-bottom: 10px;
}<h1>g<span>et your meow on</span></h1>uj5u.com熱心網友回復：
它可以用一個偽元素來完成。這是一個手動定位下劃線的示例。
h1 {
color: #394CED;
font-size: 33px;
font-weight: bold;
/* text-decoration: underline;
text-underline-offset: 2%;
text-decoration-color: #00D8D6;
text-decoration-thickness: 4px;
text-decoration-skip-ink: none; */
font-weight: 600;
padding-bottom: 10px;
position: relative;
}
h1::after {
content: "";
height: 4px;
width: 230px;
display: inline-block;
background-color: #00D8D5;
position: absolute;
top: 32px;
left: 20px;
z-index: -1;
}<h1>get your meow on</h1>uj5u.com熱心網友回復：
通過添加到現有樣式，您可以使用 CSS 僅定位第一個字母以打開跳過墨跡：
h1::first-letter {text-decoration-skip-ink: auto;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448392.html
上一篇：證明之間的內容空間不會顯示div
下一篇：如何使html視頻在手機中看起來