css 如何获得文本修饰：加下划线以忽略下伸字符

lf3rwulv 于 2022-11-19 发布在其他

关注(0)|答案(4)|浏览(171)

我在附近见过，最近的一次是在这里：http://pitchfork.com/news/67863-amazon-launches-new-streaming-service-undercutting-spotify-and-apple-music/
请注意下划线跳过了“p”和“y”的降序字母。如果我转到另一个使用相同字体的站点并抛出文本修饰：下划线，它不会应用相同的下划线样式。有什么想法吗？

css

来源：https://stackoverflow.com/questions/40008990/how-can-i-get-text-decoration-underline-to-ignore-descenders

4条答案

按热度按时间

11dmarpk1#

如果您使用text-decoration-skip: ink及其前缀变体，则在最近的Chrome中可以获得对此的本地支持。
请参见下面@pepkin88的注解，现在该属性名为text-decoration-skip-ink

赞(0）回复(0）举报 2022-11-19

pftdvrlh2#

如果您在站点中检查该元素，您会发现它实际上不是文本装饰，而是文本装饰的线条模拟，因为文本装饰处于非活动状态。
第一个

赞(0）回复(0）举报 2022-11-19

nukf8bse3#

诀窍在于：他们停用了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%;
}

赞(0）回复(0）举报 2022-11-19

mrphzbgm4#