浏览网页时，您会遇到各种可以下载的文档。有时，您需要下载不同文件格式的文档。但是，您在查找所需文件格式的文档时可能会遇到问题，因为有各种链接，每个链接都包含不同的文件格式。可以是.docx、.png、.txt、.pdf等；通常，文件格式不随链接一起指定。因此，我们不能仅通过查看链接来了解文件格式的类型。为了解决这个问题，您需要显示下载链接的文件格式。
在本文中，您将了解如何使用 CSS 在网页上显示链接的文件格式。
什么是文件格式？
文件格式是告诉计算机程序如何显示文档内容的结构化方式。它指定文件的布局，即文件中数据的组织。某些不支持特定文件格式的程序，如果以该格式打开，则可能会产生垃圾。如果您打开相同文件格式的程序，则会显示该程序的所有功能。
常见的文件格式如下 -
立即学习“前端免费学习笔记（深入）”；
文本 - .doc、.docs、.txt 等，
图像 - .jpg、.gif、.png 等，
音频 - .mp3、.mp4 等，
程序 - .html、.htm、.exe
可以通过使用CSS在网页中显示下载链接的文件格式来解决上述问题。它可以通过在页面中传递文件类型的链接，然后使用 Font Awesome Free 样式添加图像图标来实现。它将使用 ::after CSS 选择器指定。您还需要指定其中文件的内容属性。它会在具有该特定文件格式的所有链接上插入图标。
示例
让我们通过一个例子来理解它。
How to Display file format of links using CSS?
Tutorialspoint
Different file formats available for download
Text File
Word File
PDF File
网页上提供了三种不同文件格式的链接文档的链接。
字体系列中使用了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”开头的链接，则编写，
SuperCms在线订餐系统下载模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
[href^= "http"]{
Styling properties;
}
-
以选择器结尾
它使用 ($) 字符来匹配具有以选择器中指定的值结尾的属性值的元素。 示例 - 如果您想选择所有以“.exe”结尾的链接，则
[href^= "http"]{
Styling properties;
}
-
包含选择器
它使用（*）字符将元素与至少包含一次指定值的属性值进行匹配。
示例 - 假设您要选择名为“demo”的文件夹中的所有文件。
然后我们的 CSS 代码将是这样的，
a [href*= "demo"]{
styling properties;
}
::after CSS 选择器用于在元素内容之后插入内容。 content 属性指定要在选定元素之后或之前写入的内容。
示例
This is the first paragraph.
This is the second paragraph
“重要！”这个词添加在第一段之后。
标签用于连接原始文档和外部文档。它使开发人员能够将文档与外部文档链接。它包含各种属性。它们如下 -
rel - 它讨论原始文档和外部链接文档之间的关系。它具有样式表、预加载、图标、帮助、替代、作者、上一个、搜索等值，
-
type - 它讨论链接文档的媒体类型。它具有诸如 text/css 之类的值。
注意 - 如果未指定type属性，则浏览器检查rel属性以猜测正确的类型。
media - 它讨论您想要显示链接文档的设备类型。它具有诸如 all、print、screen、tv 等值，
href - 它指定链接文档的路径。它的值包含 URL。
sizes - 它讨论链接文档的大小。
示例
Tutorialspoint
This is an example
结论
在本文中，我们学习了借助 CSS 的 ::after 选择器在网页上显示文件扩展名。
