How to Display the file format of links using CSS ?

How to Display the file format of links using CSS ?
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. 
[href$=” .file_extention “]::after {
content: ” ” url( path_of_icon );
Example: This example uses ::after selector to display the file fomrat image after the text.



        How to Display file format
        of links using 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;


    Display file format of links using CSS
    PDF File
    Word File