Css 如何获得文本装饰：下划线以忽略下行项

我在附近见过，最近在这里：

---

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

如果你在网站中查看该元素，你会发现它实际上不是一个文本装饰，而是一个线条模拟，因为文本装饰是不活动的

.contents a{
颜色：#1A1A；
背景：线性梯度（#fff，#fff），线性梯度（#fff，#fff），线性梯度（#FF3530，#FF3530）；
背景尺寸：.05em 1px、.05em 1px、1px 1px；
背景重复：不重复，不重复，重复-x；
文本阴影：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；
背景位置：095%，100%95%，095%；
}
a{
文字装饰：无；
背景色：透明；
}

---

“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。“

诀窍在于：他们停用了

文本装饰

，并在线条底部添加了一个相当复杂、非常薄的红色背景，看起来像下划线。此外，他们还添加了一个与红色“背景”重叠的白色文本阴影。这看起来像一条中断的下划线

这是对此效果负责的相关CSS规则（除了

文本装饰：无

）：

---

如果您使用

text-decoration-skip:ink

及其前缀变体，则最新的Chrome浏览器中提供了对此的本机支持

---

---

请参阅下面@pepkin88的评论，现在该属性名为

文本装饰跳过墨水

您是否已经右键单击带下划线的文本并点击“Inspect Element”以在2秒钟内查看它们是如何操作的？该属性已移动到。此外，它现在是Chromium中的默认样式。

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