css - Wired.com超链接样式的纯CSS实现

Question

Wired's移动 View (将您的用户代理设置为 iOS Safari 以在桌面上查看它)具有对标准带下划线超链接样式的优雅转折:

我认为这是完全通过 CSS 实现的，没有外部图形，但不是:

background-image: url(http://cdn.mobify.com/sites/wired/production/i/link-bg.png);
background-size: 5px 24px;

我很清楚使用 border 属性来创建自定义加权下划线，但我无法创建底切线，因为 margin-bottom 偏移量在到达时被切断文本的基线。

仅使用 CSS 可以实现这种样式吗？

Answer 1

您可以应用 inset box-shadow 属性:

a {
    text-decoration: none;
    color: #000;
    box-shadow: inset 0 -4px 0 #c0e6f7;
}

jsFiddle demo

第一个值是 inset，它使 box-shadow 向内，而不是向外(因为没有更好的表达方式)，第二个值 0 是 x 值(从一侧到另一侧的框阴影)。接下来的 -4px 是 y 值(从上到下)。第三个是 0，这样阴影就没有“模糊”效果(从而给你一个坚实的边框效果)，然后是颜色值。 :)