如何获得 text-decoration: underline 以忽略下降

Question

我见过它，最近在这里：http://pitchfork.com/news/67863-amazon-launches-new-streaming-service-undercutting-spotify-and-apple-music/

请注意，下划线会跳过“p”和“y”下降线。如果我去另一个使用相同字体的站点并抛出 text-decoration: underline in，它不会应用相同的下划线样式。有什么想法吗？

Answer 1

如果您使用 text-decoration-skip: ink 及其前缀变体，则最近的 Chrome 提供了对此的本机支持。

---

查看下方@pepkin88 的评论，现在该属性被称为text-decoration-skip-ink

Answer 2

如果您检查站点中的那个元素，您会发现它并不是真正的文本装饰，而是它的线条模拟，因为文本装饰是不活动的。

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

诀窍是：他们停用了text-decoration，并在该行的最底部添加了一个相当复杂、非常薄的红色背景，看起来像一个下划线。此外，他们还添加了与红色“背景”重叠的白色文本阴影。这看起来像一个中断的下划线

这是负责此效果的相关 CSS 规则（除了text-decoration: none）：

.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%;
}