How to Display the file format of links using CSS ? Last Updated : 03 Feb, 2021 Comments Improve Suggest changes Like Article Like 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: Comment More infoAdvertise with us Next Article How to Change the Color of Link on Hover using CSS ? H harshit17 Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2020 CSS-Questions +1 More Similar Reads How to Style the Input File Type in Forms using CSS? Customizing the style of file input elements in web forms is essential to enhance the visual appeal of a website. Employing techniques such as CSS styling and the ::file-selector-button to achieve a visually appealing file upload experience. These methods allow for the customization of various desig 2 min read How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU 2 min read How to define information about the document using HTML ? The <head> tag in HTML is used to define the head portion of the document which contains metadata related to the document. This tag can contain other head elements such as <title>, <meta>, <link>, <style>, <link> etc. The <head> element was mandatory In HTML 1 min read How to Remove Underline from Links in CSS? The text-decoration property is used to remove the underline from links in CSS. You can use the below syntax on anchor element to remove underline from link.Syntaxa { text-decoration: none;}It is very basic to remove underline from link with text-decoration property. The none value removes the under 1 min read How to define all the list properties in one declaration using CSS ? Sometimes a web page has good content for reading but the styling of the texts looks improper, so it becomes boring for the readers, and lastly, they leave the web page. But when they read articles with proper styling and lists they read them fully because of the good visuals stated there which keep 3 min read What is the Limit File Format when using <input type="file"> ? In this article, we will learn how to limit file format when using HTML input tags. By using Hypertext markup language(HTML) language, we cannot restrict any users to choose any type of file from the browser (developed by the developer). But, we can apply some limitations by using <input type="fi 3 min read Like