DEV Community

Cover image for Custom Link Styles Based on File Type
SnippFlow
SnippFlow

Posted on • Edited on

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.

See the following Codepen for a demo:

Full article: Custom Link Styles Based on File Type
CSS Snippets

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay