How to Display the file format of links using CSS ?

How to Display the file format of links using CSS ?

We cannot easily know which one is which just by looking at the links.

In this article, we will explain the approach to display the file formats on a webpage. Many times while browsing, we need to download a document file but in PDF format, however, a problem might occur that multiple links of downloading the file are there, but each link contains different file formats. One may contain a document file and another may contain a PDF file. We cannot easily know which one is which just by looking at the links.

Therefore, to solve this problem, we can disclose file formats of links in our webpage just using some CSS *styling. It is done by targeting the file type of the links in the page and appending an icon image using the *::after selector and specifying the content property with the path of the icon. It will automatically insert the icon images on every suitable link it finds on the page that matches the file extension.

css html css-questions html-questions technical scripter 2020

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Shiny Glimmering Neon Button Effect using CSS

Shiny Glimmering Neon Button Effect using CSS. ‚ÄčIt gives a minimalistic look and attract user attention. The below steps have to followed to create this effect.

Rotating 3D Image Previewer Cube using CSS

3D Rotating Image Previewer is an effect in which a set of images appear on sides of a rotating 3D cube.

Top 20 Interview Questions from HTML and CSS in 2020

You can enlist these 20 questions in your bucket. So we are starting with HTML questions.

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

Tiling Perspective List Grid Hover Animation using CSS - GeeksforGeeks

Tiling Perspective List Grid Hover Animation can be created by using the nth-child CSS property and a display grid. Each column element styles and hover effects are different and this effect gives a nice perspective look .