使用 "border-bottom" 而不是 "text-decoration" 作为超链接 - 它在语义上是否正确？

Question

我看到了两种创建带下划线链接的方法：

使用text-decoration:

a:link {
  color: blue;
  text-decoration: 1px underline red;
}

<a href="#">visit hjkl.org for Vim tricks</a>

要禁用 text-decoration 并改用 border-bottom：

a:link {
  text-decoration: none;
  color: blue;
  border-bottom: 1px solid red;
}

<a href="#">visit hjkl.org for Vim tricks</a>

如您所见，外观略有不同。

使用border-bottom的版本语义正确吗？ （这是我的问题。）

一方面，边框实际上并不是HTML标记的一部分，所以我们不能说这样的标记在语义上是错误的。标记实际上是相同的。

另一方面，text-decoration 和 border-bottom 属性的名称实际上是语义化的。我们不称它们为 property-1 和 property-2.

所以，回到我的问题，第二个版本在语义上是否正确？

Answer 1

HTML 语义与 CSS 样式无关。语义关注的是为工作使用正确的标签，并且由于您对 link 使用锚元素，因此您的代码在语义上是正确的。现在，谈论 accessibility 时的经验法则是每个元素应该在视觉上相互区分，但不仅仅是使用颜色。只要您使用另一种视觉提示（颜色除外）将您的 link 与其周围的文本区分开来，就可以了，使用边框绝对是一个很好的例子。

使用 "border-bottom" 而不是 "text-decoration" 作为超链接 - 它在语义上是否正确？

Using "border-bottom" instead of "text-decoration" for hyperlinks - is it semantically correct?

html

css

semantic-markup