Question

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

这是我到目前为止所尝试的内容：

CSS

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

注意：＆＃34; .accomm-panel＆＃34; class是锚链接。我只想定位访问过的链接并查找 h5 元素并附上图标。

JS

$('.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概述了由于用户隐私问题，文章中的建议不太可行。

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

Answer 1

您必须为＆＃34;：＆＃34;之后指定字体系列。像这样的伪元素：

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

Answer 2

下面是使用.click的快速示例，这对您有用吗？据我所知，你无法定位伪css选择器

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

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

编辑此处有关于使用jquery How to set link visited color in JQuery

设计访问过的链接的更多信息

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

Answer 3

您是否在header中使用了link？我更喜欢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>

访问链接

3 个答案: