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

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

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

Update：现在是默认值

截至2022年3月，在主流的西方文字中，下划线默认跳过下行字母。（Safari）采用了text-decoration-skip-ink。它的默认值是auto，允许浏览器按照您的要求“中断下划线和上划线，使它们不接触或接近字形”（Mozilla）。若要重新创建旧样式，请使用none。
第一个