This is a link. In fact, this is also a link. Here, have another one.

What would happen if you were to click each of the above links? It can be hard to tell just by looking at them.

With CSS, we can display icons inline with our links to provide a little more information:

.context-link::before {
    font-family: Font Awesome\ 5 Free;
    margin: 0 0.2em;
}
    
/* PDF Files */
.context-link[href$='.pdf']::before {
    content: '\f15b';
}

/* External Links */
.context-link[href*='://']:not([href*='nateweller.com']):before {
    content: '\f360';
}

If the above styles make you go “whaaaaaaaatttt?????” check out attribute selectors (like :not) and pseudo elements (like ::before).

What did that do? Let’s check out those links again:

With the added context introduced by the adjacent icons, it becomes much easier to make assumptions about the behavior of these links. One is a simple link to another page, the second leading somewhere outside of the current site, and the third a PDF document.

Neat!