浏览网页时，您会遇到各种可以下载的文档。有时，您需要下载不同文件格式的文档。但是，您在查找所需文件格式的文档时可能会遇到问题，因为有各种链接，每个链接都包含不同的文件格式。可以是.docx、.png、.txt、.pdf等；通常，文件格式不随链接一起指定。因此，我们不能仅通过查看链接来了解文件格式的类型。为了解决这个问题，您需要显示下载链接的文件格式。
在本文中，您将了解如何使用 CSS 在网页上显示链接的文件格式。
什么是文件格式？
文件格式是告诉计算机程序如何显示文档内容的结构化方式。它指定文件的布局，即文件中数据的组织。某些不支持特定文件格式的程序，如果以该格式打开，则可能会产生垃圾。如果您打开相同文件格式的程序，则会显示该程序的所有功能。
常见的文件格式如下 -
立即学习“前端免费学习笔记（深入）”；
文本 - .doc、.docs、.txt 等，
图像 - .jpg、.gif、.png 等，
音频 - .mp3、.mp4 等，
程序 - .html、.htm、.exe
可以通过使用CSS在网页中显示下载链接的文件格式来解决上述问题。它可以通过在页面中传递文件类型的链接，然后使用 Font Awesome Free 样式添加图像图标来实现。它将使用 ::after CSS 选择器指定。您还需要指定其中文件的内容属性。它会在具有该特定文件格式的所有链接上插入图标。
示例
让我们通过一个例子来理解它。
<!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 style="color: orange;">Tutorialspoint</h1>
<hr>
<h3>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>
网页上提供了三种不同文件格式的链接文档的链接。
字体系列中使用了Font Awesome Free 5，以便在下载链接旁边添加文件格式类型的图标。它与 CSS 中的内联元素一起使用。 Font Awesome 是一个库，其中包含数千个指定用于各种事物的图标的列表。
每个图标都有一个唯一的 Unicode 值。以下是一些图标及其代码的示例。
| 居中对齐 | F037 |
| 文件-pdf | F1c1 |
| 文件-发票 | F570 |
| 文件-单词 | F1c2 |
| 文件-excel | F1c3 |
| 文件-图像 | F1c5 |
| 文件-powerpoint | F1c4 |
| 文件-视频 | F1c8 |
[href$=".pdf"] 是 CSS 属性选择器。 CSS 中有 3 个属性选择器。他们是 -
-
以选择器开头
它使用 (^) 字符来匹配具有以选择器中指定的值开头的属性值的元素。示例 - 如果您想选择所有以“https”开头的链接，则编写，
[href^= "http"]{
Styling properties;
}
-
以选择器结尾
它使用 ($) 字符来匹配具有以选择器中指定的值结尾的属性值的元素。 示例 - 如果您想选择所有以“.exe”结尾的链接，则
[href^= "http"]{
Styling properties;
}
-
包含选择器
它使用（*）字符将元素与至少包含一次指定值的属性值进行匹配。
示例 - 假设您要选择名为“demo”的文件夹中的所有文件。
<a href= "file/demo/important.pdf"> </a>
然后我们的 CSS 代码将是这样的，
a [href*= "demo"]{
styling properties;
}
::after CSS 选择器用于在元素内容之后插入内容。 content 属性指定要在选定元素之后或之前写入的内容。
示例
<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>
“重要！”这个词添加在第一段之后。
<link>标签用于连接原始文档和外部文档。它使开发人员能够将文档与外部文档链接。它包含各种属性。它们如下 -
rel - 它讨论原始文档和外部链接文档之间的关系。它具有样式表、预加载、图标、帮助、替代、作者、上一个、搜索等值，
-
type - 它讨论链接文档的媒体类型。它具有诸如 text/css 之类的值。
注意 - 如果未指定type属性，则浏览器检查rel属性以猜测正确的类型。
media - 它讨论您想要显示链接文档的设备类型。它具有诸如 all、print、screen、tv 等值，
href - 它指定链接文档的路径。它的值包含 URL。
sizes - 它讨论链接文档的大小。
示例
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet"
type= "text/css"
href= "style.css">
</head>
<body>
<h1> Tutorialspoint </h1>
<h3> This is an example </h3>
</body>
</html>
结论
在本文中，我们学习了借助 CSS 的 ::after 选择器在网页上显示文件扩展名。
