如何使用 CSS 显示链接的文件格式？

在本文中，我们将解释在网页上显示文件格式的方法。很多时候我们在浏览的时候，需要下载一个PDF格式的文档文件，但是可能会出现下载文件有多个链接，但是每个链接包含的文件格式不同的问题。一个可能包含一个文档文件，另一个可能包含一个 PDF 文件。仅通过查看链接，我们无法轻易知道哪个是哪个。

因此，为了解决这个问题，我们可以只使用一些CSS样式来公开我们网页中链接的文件格式。它是通过定位页面中链接的文件类型并使用::after选择器附加图标图像并使用图标路径指定内容属性来完成的。它会自动在页面上找到的与文件扩展名匹配的每个合适的链接上插入图标图像。

句法：

[href$=" .file_extention "]::after {
  content: " " url( path_of_icon );
}

示例：本示例使用::after选择器在文本后显示文件格式图像。

HTML

 

    
 
    
 
    

 

    

        GeeksforGeeks
    
    

    
Display file format of links using CSS
 
    PDF File
    


    Word File
 

 

输出：