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

Question

有线的移动视图(将您的用户代理设置为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;
}

第一个值是inset,它box-shadow向内移动,向外反对(因为缺少更好的方式),第二个值0是x值(从一侧到另一侧的盒子阴影).接下来-4px是y值(从上到下).第三个是0阴影没有"模糊"效果(因此给你一个稳定的边框效果)然后接下来是颜色值.:)