用纯 CSS 为已访问链接添加“勾号”

Web 浏览器知道页面上哪些链接已被用户访问过（直到缓存被清除）。如果您选择这样做，设计师需要利用 web 浏览器的这种知识。我确信您不需要猜测，这一切都是用 CSS 完成的。如果您选择不为链接（<a> 元素或“锚”元素）应用任何样式，大多数浏览器都有默认样式。通常，蓝色带下划线。在 Firefox 中，已访问的链接会变成紫色带下划线。

您可以通过使用伪类来控制这些锚元素的样式。本教程的目标是让已访问的链接前面有一个复选标记，以提供良好的视觉指示。您可以在 Mike Davidson 的博客 上看到一个实时示例。我们将针对 a:visited 伪类，但我将在本文后面包含有关其他锚伪类的信息。

伪伪类的完美场景

由于目标是在链接中添加复选标记，因此这是 CSS 中“before”或“after”伪类的完美场景。这些类允许您从 CSS 中直接指定页面元素并向其添加内容。以下是一个示例

blockquote:before {
    content: "From the article: ";
}

这将在您页面上的每个块引用前面添加“From the article: ” 文本。这会混淆设计和内容的分隔吗？好吧...可能有一点。但实际上并没有。不要把这些内容添加视为内容，而应该将其视为装饰，是您 web 设计的额外装饰。因为这完全存在于您的 CSS 中，所以这并不是屏幕阅读器会看到或会进入 RSS 订阅的内容。

您是否了解我使用伪伪类的目的？

a:visited:before {
   content:  "";
}

我们可以使用此 CSS 语句来定位已访问的链接，然后在此之前添加内容。现在我们要做的就是在这段内容中添加一个复选标记。这不太直观。您不能像在 HTML 中那样使用常规字形。例如，在大多数浏览器中，放置 &reg; 将不起作用。您实际上会看到该字符字符串，而不是注册字形。相反，您应该使用正斜杠和字符的 ASCII 码。复选标记的代码是 2713。因此我们有

a:visited:before {
   content:  "\2713 ";
}

大功告成！完成了！这在 Firefox、Opera、Safari 和...等等...中完美地工作着。

Internet Explorer 6 不支持非锚伪类

哎呀，真可惜。这里您需要问问自己是否在意。我打开了 Mike 的博客，看看他是否处理了 IE6 的问题。没有，他的链接在访问时只是变成灰色并带下划线，但没有使用复选标记。这是一种完全可接受的设计向前兼容形式。您使用的是好的浏览器？很好，您将获得更多更好的功能。您使用的是旧的糟糕的浏览器？没关系，页面仍然可以正常显示和阅读。

但我现在已经决定要这样做，让我们完成它！我们可以在不使用 :before 或 :after 选择器的情况下完成，我们只需使用简单的 a:visited（IE6 能够很好地理解），并设置样式使其包含复选标记。它不会是文本，而是将其制成图形并包含进来，看看吧

a:visited {
     padding-left: 14px;
     background: url(images/checkmark.gif) left no-repeat;
}

现在我们可以真正庆祝了。万岁！这在所有浏览器中都运行良好。查看 示例页面。

其他锚伪选择器

• a:link – 此伪类没有被广泛使用，因为它有点多余。如果它是一个锚元素，那么它本身就是一个链接。它存在的目的是为了特异性。您可以在这里声明一些样式，这些样式不会像您仅仅为 a 元素设置样式那样级联到其他锚样式。
• a:visited – 您现在应该了解这个。这是用于设置已访问链接样式的伪类，由您的浏览器决定。
• a:hover – 这是最常见的。使用此伪类设置链接的悬停状态样式。
• a:active – 我必须承认，我长期以来对这个伪类感到困惑。这是我认为最好的解释方式。活动状态是指您在 单击并按住 链接时看到的样式。您通常不会看到活动状态太久，因为页面可能正在将您带到另一个页面。不过我认为它可以用于添加一些装饰。有时，只需更改活动状态的颜色就是一个不错的点缀。

以下是一个 记住 锚伪类的不错方法。