When we were building Front-end Front, my brother and I, we ran into a bit of an issue. Similar to HN and DN, we wanted to deemphasise the visited links, so people wouldn’t have to click again on articles they’ve already read. A pretty simple task.
Our problem, as you see in the picture, was the icons’ presence in front of the links.
The DuckDuckGo trick
I’m calling it so because I first saw it used on the DDG website. In short, they use two
<a> tags and style the first one to be an icon. When someone clicks on the link with text, the
<a> in front also gets affected. You can read more about this trick here.
But it was not enough in our case. As you may know, for privacy reasons, browsers limit the number of CSS properties that can be applied to visited links. Whether it’s text, background, or border, you can only change the color.
A note: yes, you can use only one link, but for certain layouts, like ours, it might introduce other problems.
CSS blend modes
Coming back to the issue, we still need to fade the icons somehow. Since, like I mentioned, “opacity” is not a supported CSS property for :visited, we have to simulate it.
This is where I can finally make use of my 10 years of Photoshop :). I know that if an element on a black background has a screen blend mode applied to it, it will be fully opaque. While if it’s on a white background, the element in question becomes completely transparent.
So in order to achieve the semi-transparency we were looking for, using a shade of gray as the background will do the trick.
You can have a better look at the code in the pen bellow: