は、どのように私は、テキストの装飾を取得することができます：ディセンダー

Question

私は周りにそれを見てきました

を無視するように下線、最近ここに：http://pitchfork.com/news/67863-amazon-launches-new-streaming-service-undercutting-spotify-and-apple-music/

お知らせ下線は「P」と「y」のディセンダをスキップします。私が同じフォントを使用している別のサイトに行って、テキストの装飾をスローする：下線を付けると、同じ下線のスタイルが適用されません。何か案は？

Answer 1

サイト内のその要素を調べると、実際にテキスト装飾ではなく、テキスト装飾が無効であるため、その行のシミュレーションであることがわかります。

.contents a { 
 
     color: #1A1A1A; 
 
     background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#FF3530,#FF3530); 
 
     background-size: .05em 1px,.05em 1px,1px 1px; 
 
     background-repeat: no-repeat,no-repeat,repeat-x; 
 
     text-shadow: .03em 0 #fff,-.03em 0 #fff,0 .03em #fff,0 -.03em #fff,.06em 0 #fff,-.06em 0 #fff,.09em 0 #fff,-.09em 0 #fff,.12em 0 #fff,-.12em 0 #fff,.15em 0 #fff,-.15em 0 #fff; 
 
     background-position: 0 95%,100% 95%,0 95%; 
 
    } 
 
    a { 
 
     text-decoration: none; 
 
     background-color: transparent; 
 
    }

<div class="contents">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a>tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <a>reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

Answer 2

トリックである：彼らはtext-decorationを不活性化し、下線のように見えるラインの一番下にかなり複雑な、非常に薄い赤色の背景を追加しました。さらに、彼らは、赤色の "背景"に重なる白いテキストシャドウを追加しました。一緒に、これは中断さ下線

のように見えるこれは（text-decoration: noneに加えて）この効果に関連するCSSルールreponsibleです：

.contents a { 
    color: #1A1A1A; 
    background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#FF3530,#FF3530); 
    background-size: .05em 1px,.05em 1px,1px 1px; 
    background-repeat: no-repeat,no-repeat,repeat-x; 
    text-shadow: .03em 0 #fff,-.03em 0 #fff,0 .03em #fff,0 -.03em #fff,.06em 0 #fff,-.06em 0 #fff,.09em 0 #fff,-.09em 0 #fff,.12em 0 #fff,-.12em 0 #fff,.15em 0 #fff,-.15em 0 #fff; 
    background-position: 0 95%,100% 95%,0 95%; 
} 

Answer 3

あなたがを使用する場合は、このためのネイティブサポートは、最近のChromeで利用可能ですtext-decoration-skip: ink &プレフィックス付きバリアント。

---

今プロパティがtext-decoration-skip-ink