时间戳

首页 > 解决方案 > CSS 多行链接，可调整下划线粗细以及字母和下划线之间的垂直间距

html - CSS 多行链接，可调整下划线粗细以及字母和下划线之间的垂直间距

问题描述

目标

  1. 多行链接
  2. 下划线粗细可调
  3. 字母和下划线之间的垂直间距可调（下图中的红线）
  4. 不允许使用包装器（1 个链接 = 1 个标签）

在此处输入图像描述

我知道的链接创建方法

  1. text-decoration: 字母和下划线之间的垂直间距不可调
  2. display: inline-block+ border-bottom+ padding + bottom: 不支持多行

箱形阴影法

使用下面的解决方案，我们在字母和粗下划线之间有垂直空间的多行链接。

a {
  text-decoration: none;
}

.Link {
  padding-bottom: 1px;
  box-shadow: inset -3px -6px 0 -4px blue;
 }
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti <a href="#" class="Link"> quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</a> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

此解决方案的问题在于它仅适用于-3px -6px 0 -4pxbox-shadow 设置。对 box-shadow 参数稍作改动就会破坏视图。

这意味着下划线粗细和字母与下划线之间的垂直间距均不可调整。

至少，如何调整它并不明显。我不明白如何通过实验调整它。

好吧，CSS 实现可以是任意复杂的，但它的复杂性必须封装到 CSS 预处理器 mixin 中。换句话说，我需要这样的 API：

@mixin multilineLink(
  underilineThickness,
  verticalSpaceBetweenLettersAndUnderiline
) {
  // ...solution
}

如果不可能，我不敢相信：自定义下划线厚度和间隙的多线链接是市场的基本需求，而不是像特技飞行那样复杂的视觉效果。

标签： htmlcss

解决方案

考虑背景渐变。

线条的粗细/位置可通过根据需要更改 % 值进行调整。

a {
  text-decoration: none;
}

.Link {
  padding-bottom: 1px;
  background: linear-gradient(to bottom, transparent 92%, blue 92%);
}
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti <a href="#" class="Link"> quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</a>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat.

推荐阅读