Question

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

请注意，下划线会跳过“p”和“y”下降符。如果我去另一个使用相同字体并抛出文本修饰的网站：下划线，则不会应用相同的下划线样式。有什么想法吗？

Answer 1

如果您使用 ~~text-decoration-skip: ink~~ ＆amp;它的前缀变种。

请参阅下面的@ 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并在线的最底部添加了一个相当复杂，非常薄的红色背景，看起来像下划线。此外，他们还添加了一个白色文字阴影，与红色＆＃34;背景＆＃34;重叠。总之，这看起来像是一个被打断的下划线

这是与此效果相关的相关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%;
}

如何进行文本修饰：强调下划线以忽略下行

3 个答案: