访问链接后添加 FontAwesome 图标答案

【问题标题】：Add FontAwesome Icon after Visited Link访问链接后添加 FontAwesome 图标
【发布时间】：2015-10-27 21:22:15
【问题描述】：

我想在用户访问我网站的每个链接后添加一个简单的 check 图标。

到目前为止，这是我尝试过的：

CSS

.accomm-panel:visited h5:after {
    content: "\f00c";
    color: #80b54d;
}

注意：“.accomm-panel”类是锚链接。我只想定位访问过的链接并查找 h5 元素并附加图标。

$('.accomm-panel:visited h5').after('<i class="fa fa-check fa-1"></i>');

HTML

<a href="http://localhost/gbtc/accommodation/029gb-step-back-in-time/?_sfm_low_season_fee=0+10000" class="accomm-panel">
    <div class="img-container" style="background-image: url('http://localhost/gbtc/wp-content/uploads/2015/05/gordons-bay-harbour-wall-sunset.jpg');">
        <div class="price">
            <p>From</p>
            <p class="amount">R</p>
        </div>
    </div>
    <div class="panel-content">
        <h5>Step Back in Time</h5>                                                                                           
        <p class="description">1 Guest • 12 Bedrooms • 12 Bathrooms • 029GB</p>
    </div>
</a>

这些方法都不起作用。 This article 概述由于用户隐私问题，文章中的建议不太可能奏效。

我想知道这些问题是否有解决方法。

【问题讨论】：

:visited 无论如何都不是有效的 jQuery 选择器
@haim770：它是一个有效的 CSS 选择器，所以它在 jQuery 下当然应该是有效的。浏览器是否返回访问过的锚元素列表尚不确定（我目前正在使用移动设备），但这是浏览器和 JavaScript 的安全问题，而不是因为选择器无效。
@DavidThomas，不，不是。见api.jquery.com/category/selectors。在我看来，原生 document.querySelectorAll 也无法使用它（出于明显的隐私原因）。
@MarcosPérezGude 我已经添加了 HTML
@haim770, David Thomas：jQuery 在后台使用 qSA，因此任何“有效”的 CSS 选择器（命名空间的选择器除外）都可以在 qSA 中正常工作而不会引发错误。 “有效”和“支持”之间存在巨大差异，但是......

标签： jquery css css-selectors

【解决方案1】：

你必须像这样为 ":after" 伪元素指定字体系列：

.accomm-panel:visited h5:after {
    font-family: FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

【讨论】：

这是一个有效的答案。这也是我会回应的。 OP 可能会用这个技巧忘记 javascript！
谢谢。如果您阅读 [链接] (developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter) 上的文档，这似乎不是必需的。 FontAwesome 确实可以在网站上使用，因为我们将其用于其他部分。
我试图将您的答案重新创建为 JSFiddle，但我没有看到您正在谈论的行为，这个 jsfiddle 是否以某种方式关闭？ jsfiddle.net/d4omnskw
是的。这是因为那里的图标没有从父/祖先继承的任何字体系列规则。
实际上这将适用于任何伪选择器，除了 :visited 因为现代浏览器受到限制 :visited 样式只有少数属性，例如颜色、背景颜色...出于安全原因，请在此处阅读更多信息：@ 987654323@ 访问您必须使用 JavaScript。遗憾的是没有工作轮次。

【解决方案2】：

这是一个使用.click 的简单示例，这对您有用吗？据我所知，你不能定位伪 CSS 选择器

它所做的只是在点击时添加活动类。我会尝试稍微调整一下

http://codepen.io/noobskie/pen/VLgmyG

编辑这里还有更多关于使用 jquery How to set link visited color in JQuery设计访问链接的信息

edit 刚刚看到更新的 html @Heidar Mostafa 答案效果更好

【讨论】：

【解决方案3】：

你在link 中使用了header 吗？我更喜欢link中的header，那么你可以关注this article

.accomm-panel:visited:after {
  content: "\f00c";
  color: #80b54d;
}

顺便说一句，在你的情况下......嗯！我不认为:before 伪在:visited 伪中起作用

.accomm-panel:visited {
  color: red;
}

.accomm-panel:visited h5 {
  color: #80b54d;
}

.accomm-panel:visited h5:after {
  content: "test";
}

<a href="/sample.html" class="accomm-panel">
	<h5>This is a link</h5>
</a>

【讨论】：