Search code examples
javascripthtmlcssbrowserbrowser-history

How does DuckDuckGo show icons according to if I've visited a page?

I noticed when using DuckDuckGo, a tick appears next to a link when I've visited the page, as here:

Search Screenshot

What particularly intrigues me is that, unlike purple links where the browser applies the a:visited pseudoclass, this is a separate element within the DOM:

DOM tree

I'm aware that browsers leak information about visited links, and I'm also aware that it's possible for DDG to store which links I follow (though that seems to be against their MO).

Is this a case of the former technique being used?

EDIT: I've also checked my cookies, local & session storage, websql & indexedDB - the page uses none.

Solution

  • They just use a styled element. No fancy techniques. The anchor element contains a ::before element with the check icon (content: "\2611") and the tooltip.

    The font color is #fff by default, which makes the element invisible. When you have visited the link the font color is set to gray which makes the element visible:

    .result__check:visited {
    color: #c3c3c3;
}

    So it's just standard browser behavior and no tricks.