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

Question

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

我打算使用的 CSS 是:

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

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

Answer 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 */
}

<a href="#">My hyperlink</a>

Text-Decoration @ MDN