Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display the file format of links using CSS?
While browsing through a web page, you come across various documents which can be downloaded. Sometimes, you need to download a document but in different file format. However, you may have a problem in finding the document of your desired file format because there are various links each containing different file formats. It can be .docx, .png, .txt, .pdf etc. Generally, file formats are not specified along with the links. So, we cannot know the type of file format just by looking the links.
In this article, you will learn how to display the file format of links on a web page using CSS attribute selectors and Font Awesome icons.
Syntax
[href$=".extension"]::after {
content: 'unicode-value';
color: color-value;
}
Method 1: Using Font Awesome Icons
This method uses Font Awesome Free 5 library to display file format icons next to download links
Installation: Include Font Awesome CSS by adding this link tag in your HTML head section:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-family: "Font Awesome 5 Free";
text-decoration: underline;
font-size: 20px;
color: black;
border: 2px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
}
[href$=".txt"]::after {
content: '\f15c';
color: blue;
margin-left: 5px;
}
[href$=".docx"]::after {
content: '\f1c2';
color: green;
margin-left: 5px;
}
[href$=".pdf"]::after {
content: '\f1c1';
color: red;
margin-left: 5px;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body style="text-align: center;">
<h1 style="color: orange;">File Format Display Example</h1>
<h3>Different file formats available for download</h3>
<a href="document.txt">Text File</a>
<br><br>
<a href="document.docx">Word File</a>
<br><br>
<a href="document.pdf">PDF File</a>
</body>
</html>
Three download links are displayed with their respective file format icons: - "Text File" with a blue document icon - "Word File" with a green Word document icon - "PDF File" with a red PDF icon Each link shows the file type visually through colored icons.
Method 2: Using Text Labels
You can also display file formats using simple text labels instead of icons
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
padding: 8px 12px;
margin: 5px;
display: inline-block;
border-radius: 4px;
background-color: #f0f0f0;
}
[href$=".txt"]::after {
content: ' [TXT]';
color: blue;
font-weight: bold;
}
[href$=".docx"]::after {
content: ' [DOCX]';
color: green;
font-weight: bold;
}
[href$=".pdf"]::after {
content: ' [PDF]';
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Download Files</h2>
<p><a href="report.txt">Annual Report</a></p>
<p><a href="manual.docx">User Manual</a></p>
<p><a href="guide.pdf">Installation Guide</a></p>
</body>
</html>
Links display with text labels showing file formats: - "Annual Report [TXT]" in blue - "User Manual [DOCX]" in green - "Installation Guide [PDF]" in red
CSS Attribute Selectors
The key to this technique is using CSS attribute selectors. Here are the three main types
| Selector | Description | Example |
|---|---|---|
[href^="value"] |
Begins with selector |
[href^="http"] matches URLs starting with "http" |
[href$="value"] |
Ends with selector |
[href$=".pdf"] matches links ending with ".pdf" |
[href*="value"] |
Contains selector |
[href*="demo"] matches URLs containing "demo" |
Common Font Awesome File Icons
| File Type | Unicode | Description |
|---|---|---|
| \f1c1 | PDF document icon | |
| Word | \f1c2 | Microsoft Word document |
| Excel | \f1c3 | Microsoft Excel spreadsheet |
| PowerPoint | \f1c4 | Microsoft PowerPoint presentation |
| Image | \f1c5 | Generic image file |
| Text | \f15c | Plain text document |
Conclusion
Displaying file formats using CSS attribute selectors and the ::after pseudo-element greatly improves user experience by providing visual cues about download links. You can use either Font Awesome icons for a professional look or simple text labels for a lightweight solution.
462 Views
