Add FontAwesome Icon after Visited Link

Question

I want to add a simple check icon after every link that the user has visited on my website.

Here is what I have tried to so far:

CSS

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

Note: The ".accomm-panel" class is the anchor link. I only want to target visited links and the look for the h5 element and attach the icon.

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>

Neither of these methods work. This article outlines that due to user privacy issues, the suggestions in the article are unlikely to work.

I'd like to know if there's a workaround for these issues.

@haim770: it's a valid CSS selector, so it certainly should be valid under jQuery. Whether the browser returns a list of visited anchor elements is unsure (I'm currently on mobile), but that's a security issue with the browser and JavaScript, not because of an invalid selector. — David Thomas, Aug 05 '15 at 08:14
@DavidThomas, No it's not. See https://api.jquery.com/category/selectors/. As I see it, it wouldn't be available to the native `document.querySelectorAll` as well (for obvious privacy reasons). — haim770, Aug 05 '15 at 08:16
@haim770, David Thomas: jQuery uses qSA under the hood, so any "valid" CSS selector (except namespaced ones) will work fine in qSA without causing it to throw an error. There is a huge difference between "valid" and "supported", however... — BoltClock, Aug 05 '15 at 09:51

score 3 · Answer 1 · answered Aug 05 '15 at 08:19

3

You have to specify the font family for the ":after" pseudo element like that:

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

answered Aug 05 '15 at 08:19

Heidar

689
4
12

This is a valid answer. It is the same that I will respond. OP may forget javascript with this trick! – Marcos Pérez Gude Aug 05 '15 at 08:22
Thank you. If you read the documentation at [link] (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter) this does not seem to be a requirement. FontAwesome does work on the site, as we use it for other sections. – Marcus Christiansen Aug 05 '15 at 08:25
I was trying to recreate your answer as a JSFiddle but I'm not seeing the behavior you are talking about, is this jsfiddle off in some way? http://jsfiddle.net/d4omnskw/ – Jason Sperske Aug 05 '15 at 08:30
Yes. this is because the icons there don't have any font-family rule inherited from parent/ancestors. – Heidar Aug 05 '15 at 08:31
@HeidarMostafa If I use ".accomm-panel h5::after" it works on all links. As soon as I make it ".accomm-panel:visited h5::after" does it stop working altogether. – Marcus Christiansen Aug 05 '15 at 08:33
1

actually this will work with any pseudo selector except :visited as modern browsers restricted :visited styling to few properties such as color, background-color... for security reasons, read more about it here : https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for visited you'll have to use JavaScript. sadly there is no work rounds. – Heidar Aug 05 '15 at 08:47

score 0 · Answer 2 · edited May 23 '17 at 12:21

Heres a quick example using .click could this work for you? As far as i know you cant target pseudo css selectors

all its doing is just adding the active class on click. I'll try tweaking it a little bit

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

edit Also here's more info on styling visited links with jquery How to set link visited color in JQuery

edit just seen the updated html @Heidar Mostafa answer works better

score 0 · Answer 3 · answered Aug 05 '15 at 08:52

Did you use header in link? I prefer link in header, then you can follow this article

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

BTW, in your case... Uhm! I don't think :before pseudo work in :visited pseudo

.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>

Add FontAwesome Icon after Visited Link

3 Answers3