How can I highlight visited anchors in an epub?

Question

Suppose I insert the following anchor in an epub...

<span id="horse"></span>The first horses in America . . .

Then I insert a link in the index...

Horse, in America, <a href="..Text/chapter1#horse">23</a>

Is there something I can do to make the anchored text somehow more visible if someone clicks the link? In other words, I don't want someone to click the link in the index, then spend several seconds trying to find whatever it is they're looking for.

I'd like anchored text to appear bold, red, underlined, with a background color, or something like that. I imagine I'd have to put INSIDE the span, like this...

<span id="horse">The first horses in America</span> . . .

My understanding is that Epub 2.0 is compatible with far more devices than Epub 3.0, so that's what I'm working with. However, I could upgrade to 3.0 if it's needed to activate some sort of CSS or JS needed to make this work.

Answer 1

You can use a couple CSS selectors to style links.

a:link will select and style all unvisited links, while a:visited, surprisingly enough, will do the same with visited ones.

Examples:

a:link { 
    text-decoration: underline;
}

---

a:visited { 
    background-color: grey;
}

Remember that epub files are often read on B&W e-ink devices, so you should consider this if you want to differentiate links by using colors; the result might not be as expected.

Answer 2

You can use these CSS styling for links.

/* unvisited link */
a:link { 
color: green;
}

/* visited link */
a:visited {
color:red;
}

/* mouse over link */
a:hover {
color: blue;
}

/* selected link */
a:active { 
color: orange;
}