文字下方有一条奇怪的粗线

Question

我正在尝试为学校项目创建一个投资组合站点，这就是正常分辨率下的样子

看起来正常吗？但是，当我缩小文本时，会出现一条奇怪的粗线

这是HTML和CSS代码。

@font-face {
  font-family: 'KGDefyingGravity';
  src: url(../fonts/KGDefyingGravity.ttf);
}

h1 {
  font-family: 'KGDefyingGravity';
  font-size: 6em;
  text-align: center;
  color: rgb(15, 0, 223);
  letter-spacing: -1px;
}

.selection {
  font-family: 'KGDefyingGravity';
  font-size: 5em;
  text-align: center;
  color: rgb(223, 0, 15);
  letter-spacing: -1px;
}

<h1>[|||||||'S|PORTFOLIO|SITE]</h1>
<a href="\index.html" class="selection">[HOME|PAGE]</a>

编辑：我不知道为什么我的代码是一个代码片段。该网站似乎只是自动执行此操作。

Answer 1

可能是默认的用户代理样式表包含

  

文本装饰：下划线；

为避免这种情况，您应该放

  

文本装饰：无；

在DOM元素的选择器内部。

例如：

h1 {
  text-decoration: none;
}

我希望我能提供帮助;）