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.
<!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: