Using CSS visited property for href to a file

Question

I have this HTML of 2 anchor tags, one to a file and one to google

<a href="http://example.com/files/foobar.csv">
    http://example.com/files/foobar.csv
</a>
<a href="http://google.com">
    Google
</a>

I also have this CSS to make visited anchor tags red.

a:visited {
    color: #ff0000;
}

When I click on the google link, the link turns red as expected because I have visited it.

When I click on the file however, the link does not turn red.

So it seems file paths work differently than url paths.

How can I get the visited property working on anchor tags with href to a file

Answer 1

Could you try to insert the URL directly in Browser History.

You can do something like:

HTML:

$(".file-link").click( function () {
  $(this).attr("href");
  var stateObj = { foo: "bar" };
  window.history.pushState({ title: "Services" }, "foobar.csv", $(this).attr("href"));
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/files/foobar.csv" class="file-link">
    http://example.com/files/foobar.csv
</a>
<a href="http://google.com">
    Google
</a>

Answer 2

Nice answer is also listed here: text-decoration not working for visited state link

You can done with this jquery addClass.

Demo code

$('a').click(function(){
    $(this).addClass('visited');
});

CSS

.visited {
  color: green;
  text-decoration: line-through;
}

fiddle demo: https://jsfiddle.net/nikhilvkd/7y2fyytw/