Custom Link Styles Based on File Type

To improve user experience and make navigation clearer it’s worth customising the link style based on the type of file they link to. This way users can see what type of file they will download or what kind of content the link will lead to before they even click on it. In this post we’ll show you how to do this with CSS, for different file types like PDFs, ZIPs, emails and external HTTP links.

CSS Code for Different File Types

Here’s an example of the CSS code that customises the link style based on the file type:

Custom Link Styles with images

/* ---------------------------------------------------- */
/*    Snippflow Custom Link Styles Based on File Type   */
/* ---------------------------------------------------- */

/* Style for links to PDF files */
a[href$=".pdf"] {
    color: #fa0f00;
    background: url('icon-pdf.png') no-repeat left center;
    background-size: 16px;
    padding-left: 20px;
    font-weight: bold;
}

/* Style for links to ZIP files */
a[href$=".zip"] {
    background: url('icon-zip.png') no-repeat left center;
    background-size: 16px;
    padding-left: 20px;
    text-decoration: underline;
}

/* Style for external links (HTTP/HTTPS) */
a[href^="http"] {
    background: url('icon-external.png') no-repeat left center;
    background-size: 16px;
    padding-left: 20px;
}

Custom Link Styles with Font Awesome

/* ---------------------------------------------------- */
/*    Snippflow Custom Link Styles Based on File Type   */
/* ---------------------------------------------------- */

a[href]::before {
    font-family: "Font Awesome 6 Free";
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    line-height:1;
    text-rendering:auto;
    margin-right: 5px;
    min-width: 20px;
    text-align: center;
}

/* Style for links to PDF files */
a[href$=".pdf"]::before {
    content: "\f1c1";
}

/* Style for links to ZIP files */
a[href$=".zip"]::before {
    content: "\f1c6";
}

/* Style for e-mails */
a[href^="mailto"]::before {
    content: "\f0e0";
}

See the Pen Custom Link Styles Based on File Type by Snippflow (@snippflow) on CodePen.

Explanation of the CSS Syntax [href$="file-extension"] and [href^="text-prefix"]

In the CSS above we use attribute selectors that allow us to style HTML elements based on the value of an attribute.

1. [href$=”…”]: The $= operator is used to check if the href attribute ends with a specific string of characters. For example [href$=”.pdf”] means the CSS rule will be applied to all links whose href attribute ends with .pdf. This allows us to style links based on the file type they link to.
2. [href^=”…”]: The ^= operator is used to check if the href attribute starts with a specific string of characters. For example [href^=”http”] will style all links whose href starts with http, which is common for links to external sites. This selector is useful when we want to visually differentiate links that take the user outside our site.

These attribute selectors are a powerful feature in CSS. We can style elements more precisely based on their attributes and values. This makes navigation more intuitive and overall user experience better.

See also

• Custom CSS Text Selection Color
• Custom Select Arrow using CSS
• Custom Mouse Cursor Using External Image
• Circled Highlight Text Effect
• CSS Status Indicators with Pulsing Animation

Summary

Icons: https://fontawesome.com/