Problem with the visited class on links

Authoring Twine
1

Twine Version: 2.11.1

Hi everyone, I’ve been scratching my head over this and would really appreciate some help.

I’m trying to make Harlowe work with colored links(as a globally set variable, not an individual one). Simple, right? I read a whole bunch of posts about this, and I got different color links working, but no one seems to have my specific problem concerning visited links.

My CSS:

tw-link, .enchantment-link {
	color: hotpink;
}

tw-link:hover, .enchantment-link:hover {
	color: cyan;
}

.visited {
	color: green;
}

.visited:hover {
	color: orange;
}

Note that this CSS does work, but there is something going wrong with the application of it.

When I inspect the code on the test page, I can find that none of the links I visit get the ‘visited’ class. I can add the class manually in the browser page, so I can tell the class works, but the browser doesn’t apply it? Or is it the proofing format that’s malfuctioning, maybe? I’m using the default inbuilt proofing format.

I tried using a different web browser, to see if it was the web browser(Firefox) that was the problem, but it didn’t work there either, so I feel like it must be something around twine or the story format or the proofing format going wrong.

Thanks in advance if you reply.

1 Like
2

Browsers do not add a class to visited links, instead they expose pseudo classes namely :visited, :active, and :link.

So the selector would be a:visited for a normal visited link.

However, Harlowe’s links are not real browser links (i.e. <a> tags), they are tw-link elements (if you are lucky, using (click:) or various other macros can create clickable things that are not tw-link elements). Harlowe does add a .visited class to visited links, however, so the code you have should work.

So, how are you testing it? Are you using the back arrow in the sidebar? Because that won’t work, it will undo the navigation, and so the link you clicked on won’t count as visited.

If you aren’t doing that, then the problem is likely precedence, i.e. that your tw-link selector is overriding your .active selector. Try tw-link.visted, .enchantment-link.visited

2 Likes
3

Oh fascinating. Yeah, I was testing it using the back arrow. That was my issue. Thanks!

I guess I’ll have to remove the arrows and add a ‘back’ link on every end, then. Should I make a new post asking how to do that automatically? I’ll do it manually if there’s no other option, but it’s… very many ending passages to edit.

Edit: figured it out! All I had to do was add a footer passage.

1 Like