如何缩小WordPress自定义超链接文本与下划线的间距？

嘿，我之前调试WordPress链接样式时也碰到过这个需求，除了图片替代的方法，其实有几个更灵活的纯CSS方案，不用依赖图片，维护起来也省心：

1. 用现代CSS属性直接控制（推荐） #

现代浏览器已经支持text-underline-offset和text-decoration-thickness这两个属性，能直接调整下划线的位置和厚度，完全不需要额外布局修改：

a.custom-link {
  text-decoration: underline;
  /* 控制下划线与文本的垂直间距，负数可让下划线更贴近文本 */
  text-underline-offset: 2px;
  /* 可选：调整下划线粗细 */
  text-decoration-thickness: 1px;
  /* 可选：统一下划线颜色 */
  text-decoration-color: #2d72d9;
}

把.custom-link换成你实际用的链接类名（如果是全站所有链接，直接用a标签即可），然后把这段CSS加到WordPress的「外观 > 自定义 > 额外CSS」里，或者子主题的style.css文件中，避免主题更新时丢失修改。

2. 用border-bottom替代默认下划线 #

如果需要兼容旧版浏览器（比如IE），可以用border-bottom模拟下划线，通过调整padding或line-height控制间距：

a.custom-link {
  text-decoration: none;
  /* 设置下划线样式 */
  border-bottom: 1px solid #2d72d9;
  /* 控制文本与下划线的间距，数值越小越紧贴 */
  padding-bottom: 1px;
  /* 可选：确保行高不会拉大间距 */
  line-height: 1.3;
}

这里的padding-bottom就是用来控制文本和下划线的间距，你可以根据需求微调数值，比如设为0.5px会更贴近。

3. 用box-shadow模拟下划线 #

这个方案的好处是下划线不占用布局空间，适合对布局精度要求高的场景：

a.custom-link {
  text-decoration: none;
  /* 阴影的垂直偏移量控制下划线位置，0.5px会非常贴近文本 */
  box-shadow: 0 0.5px 0 #2d72d9;
}

如果需要下划线更粗，可以调整阴影的模糊半径和扩展半径，比如box-shadow: 0 1px 0 0 #2d72d9;。

小提示 #

如果是针对特定页面的链接，还可以给页面添加自定义类，用页面类+链接类的组合选择器，只修改目标页面的链接样式，比如：

.page-id-123 a.custom-link {
  /* 这里写针对该页面的样式 */
}

内容的提问来源于stack exchange，提问作者Louis