CSS 扩展文本超链接及其下划线之间的空间答案

【问题标题】：CSS to Expand Space Between Text Hyperlink and Its UnderlineCSS 扩展文本超链接及其下划线之间的空间
【发布时间】：2019-09-15 04:59:57
【问题描述】：

有没有办法使用 CSS 扩展基于文本的超链接中的字母和下划线之间的空间？

我打算使用的 CSS 是：

.post-body a {
  text-decoration: underline;
}

我的博客托管在 Blogger 上并使用简单模板 - http://nickalive.blogspot.com

【问题讨论】：

标签： html css web hyperlink blogger

【解决方案1】：

不，不使用标准 text-decoration 设置。

您可以做的是用一个伪元素替换下划线，您可以根据自己的喜好进行自定义。

a {
  text-decoration:none;
  margin:1em;
  display: inline-block;
  position: relative;
}

a:after {
  content:"";
  position: absolute;
  left:0;
  bottom:-12px; /* changes distance from text */
  width:100%; /* width of underline */
  height:5px; /* height of underline */
  background: red; /* color or underline */
}

&lt;a href="#"&gt;My hyperlink&lt;/a&gt;

Text-Decoration @ MDN

【讨论】：

我刚刚在我的测试博客上尝试过。它有效，但代码使超链接图像也有下划线。 imgur.com/a/FIwHLfQ - 有没有办法只在文本链接下划线？
不...您需要为这些链接提供不同的样式。