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