Open In App

How to Display the file format of links using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will explain the approach to display the file formats on a webpage. Many times while browsing, we need to download a document file but in PDF format, however, a problem might occur that multiple links of downloading the file are there, but each link contains different file formats. One may contain a document file and another may contain a PDF file. We cannot easily know which one is which just by looking at the links.

Therefore, to solve this problem, we can disclose file formats of links in our webpage just using some CSS styling. It is done by targeting the file type of the links in the page and appending an icon image using the ::after selector and specifying the content property with the path of the icon. It will automatically insert the icon images on every suitable link it finds on the page that matches the file extension. 

Syntax:

[href$=" .file_extention "]::after {
  content: " " url( path_of_icon );
}

Example: This example uses ::after selector to display the file format image after the text.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Display file format
        of links using CSS?
    </title>
 
    <link rel="stylesheet" type="text/css"
href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
 
    <style type="text/css">
        a {
            font-family: "Font Awesome 5 Free";
            text-decoration: none;
            font-size: 24px;
            color: black;
        }
 
        [href$=".pdf"]::after {
            content: '  \f1c1';
            color: red;
        }
 
        [href$=".docx"]::after {
            content: '  \f1c2';
            color: green;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <hr>
    <h3>Display file format of links using CSS</h3>
 
    <a href="GeeksforGeeks.pdf">PDF File</a>
    <br><br>
    <a href="GeeksforGeeks.docx">Word File</a>
 
</body>
 
</html>


Output:



Last Updated : 03 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads