Styling Visited Links with SVG

As I’ve discussed in the previous article, browser security concerns limit CSS for visited links to just four properties: color, background-color, border-color and outline-color. While normal links can be made to appear any way designers wish, the severe limitations on visited states can lead users to a poor understanding of what they’ve completed on a site.

While HTML links are limited to four properties, there is an interesting exception for SVG elements: fill and stroke can also be colored in response to a visited state. This led me to experiment with the links in my web development reading lists: since users are expected to read them serially, it would be helpful to have a clear indication as to what has been read in the past.

Linked Beads

The basic markup of my reading lists is a series of ordered list items. I’ve added a tiny SVG element to the end of each link:

<ol class="goals">

<li><a href="/865/HTML"><img src="star-cave.jpg" alt>HTML Reading List<svg viewBox="0 0 50 50"><polygon points="4,30 14,40 45,12 41,9 14,34 8,27"/></svg></a>

<li><a href="/919/CSS"><img src="milky-way-arch.jpg" alt>CSS Reading List<svg viewBox="0 0 50 50"><polygon points="4,30 14,40 45,12 41,9 14,34 8,27"/></svg></a>

</ol>

The CSS positions the links one above the other and joins them with lines:

ol.goals {

list-style-type: none;

margin-bottom: 2rem;

}

ol.goals li {

position: relative;

margin-top: 1.6rem;

}

ol.goals a img {

vertical-align: middle;

width: 75px;

height: 75px;

margin-right: 1rem;

border: 1px solid transparent;

border-radius: 50%;

background: #333;

}

ol.goals a {

text-decoration: none;

z-index: 3;

position: relative;

}

ol.goals li:after {

content: " ";

position: absolute;

height: 1.6rem;

width: 3px;

background: #888;

left: 36px;

top: 75px;

z-index: 1;

}

Extra CSS positions the SVG elements and fills them with white (the same as the background-color of the page):

ol.goals a svg {

position: absolute;

right: 0;

width: 3rem;

height: 3rem;

}

ol.goals a svg polygon {

fill: white;

}

When each link is visited, the text in the link is greyed out, while the SVG element is filled with green:

ol.goals a:visited { color: #ccc; }

ol.goals a:visited svg polygon { fill: green; }

The result can be seen at the top of this article, after you click on each link.

Don’t Want to Use SVG?

While I’d suggest that SVG elements provide the greatest possible creative opportunities to style visited links, you can use a variation of this technique with Unicode characters. The markup changes to:

<ol class="goals">

<li><a href="/865/HTML"><img src="/assets/images/icons/milky-way-cave.jpg" alt>HTML Reading List<span>✓</span></a>

<li><a href="/919/CSS"><img src="/assets/images/icons/mobius-arch.jpg" alt>CSS Reading List<span>✓</span></a>

</ol>

The <span> element contains the Unicode character that indicates completion for the link. You can probably guess the CSS:

ol.goals a span {

position: absolute;

right: 0;

font-size: 3rem;

color: #fff;

}

ol.goals a:visited span {

color: green;

}

The result is similar, albeit limited to characters supported by the page typeface. Explore the code for this demo on CodePen