When browsing the web, you will come across various documents that you can download. Sometimes, you need to download documents in different file formats. However, you may have problems finding documentation in the file format you need because there are various links, each containing a different file format. Can be .docx, .png, .txt, .pdf, etc.; typically the file format is not specified along with the link. Therefore, we cannot know the type of file format just by looking at the link. In order to solve this problem, you need to display the file format of the download link.
In this article, you will learn how to display linked file formats on a web page using CSS.
What is the file format?
File format is a structured way of telling a computer program how to display the contents of a document. It specifies the layout of the file, that is, the organization of the data in the file. Some programs that do not support a specific file format may generate garbage if opened in that format. If you open a program with the same file format, all features of that program are displayed.
Common file formats are as follows -
Text - .doc, .docs, .txt, etc.,
Images - .jpg, .gif, .png, etc.,
Audio - .mp3, .mp4, etc.,
Program - .html, .htm, .exe
The above problem can be solved by using CSS to display the file format of the download link in the web page. It can be achieved by passing a link to the file type in the page and then adding the image icon using the Font Awesome Free style. It will be specified using the ::after CSS selector. You also need to specify the content properties of the files within it. It inserts an icon on all links with that specific file format.
Example
Let us understand it through an example.
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-family: "Font Awesome 5 Free";
text-decoration: underlined;
font-size: 20px;
color: black;
border: 2px solid;
padding: 2px 1px 4px 2px;
}
[href$=".txt"]::after {
content: '\f1c3';
color: blue;
}
[href$=".docx"]::after {
content: '\f1c2';
color: green;
}
[href$=".pdf"]::after {
content: '\f1c1';
color: red;
}
</style>
<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">
</head>
<body style="text-align: center;">
<h1 id="Tutorialspoint">Tutorialspoint</h1>
<hr>
<h3 id="Different-file-formats-available-for-download">Different file formats available for download </h3>
<a href="tutorialspoint.txt">Text File</a>
<br> <br>
<a href="tutorialspoint.docx">Word File</a>
<br> <br>
<a href="tutorialspoint.pdf">PDF File</a>
</body>
</html>
Links to linked documents in three different file formats are provided on the web page.
Font Awesome Free 5 is used in the font family to add an icon for the file format type next to the download link. It works with inline elements in CSS. Font Awesome is a library that contains thousands of lists of icons designated for use in various things.
Each icon has a unique Unicode value. Here are some examples of icons and their codes.
| Centered alignment | F037 |
| File-pdf | F1c1 |
| Document-Invoice | F570 |
| File-Word | F1c2 |
| File-excel | F1c3 |
| File-Image | F1c5 |
| File-powerpoint | F1c4 |
| File-Video | F1c8 |
[href$=".pdf"] is a CSS property selector. There are 3 attribute selectors in CSS. they are -
-
Start with selector
It uses the (^) character to match elements with attribute values that begin with the value specified in the selector. Example - If you want to select all links starting with "https" then write,
[href^= "http"]{
Styling properties;
}
-
End with selector
It uses the ($) character to match elements with attribute values ending with the value specified in the selector. Example - If you want to select all links ending with ".exe" then
[href^= "http"]{
Styling properties;
}
-
Contains selectors
It uses the (*) character to match elements with attribute values that contain the specified value at least once.
Example - Suppose you want to select all files in a folder named "demo".
<a href= "file/demo/important.pdf"> </a>
Then our CSS code will look like this,
a [href*= "demo"]{
styling properties;
}
::after CSS selector is used to insert content after the content of an element. The content property specifies content to be written after or before the selected element.
Example
<html>
<head>
<style>
.para1:after{
content: “Important!";
color: red;
}
</style>
</head>
<body>
<div>
<p class= "para1"> This is the first paragraph. </p>
<p class= "para2"> This is the second paragraph </p>
</div>
</body>
</html>
The words "Important!" are added after the first paragraph.
Thetag is used to connect the original document and the external document. It enables developers to link documents with external documents. It contains various properties. They are as follows -
rel - It discusses the relationship between the original document and the externally linked document. It has stylesheet, preload, icon, help, alternative, author, previous, search, etc. values,
-
type - This discusses the media type of the linked document. It has values like text/css.
Note - If the type attribute is not specified, the browser checks the rel attribute to guess the correct type.
media - This discusses the type of device on which you want to display the linked document. It has values like all, print, screen, tv,
href - It specifies the path to the linked document. Its value contains the URL.
sizes - It discusses the sizes of linked documents.
Example
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet"
type= "text/css"
href= "style.css">
</head>
<body>
<h1 id="Tutorialspoint"> Tutorialspoint </h1>
<h3 id="This-is-an-example"> This is an example </h3>
</body>
</html>
in conclusion
In this article, we learned about displaying file extensions on web pages with the help of CSS’s ::after selector.
The above is the detailed content of How to display linked file format using CSS?. For more information, please follow other related articles on the PHP Chinese website!
@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.
Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AMI know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &
The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AMLinking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.
CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AMChoosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.
How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AMThe best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Notepad++7.3.1
Easy-to-use and free code editor
