En este artículo, explicaremos el enfoque para mostrar los formatos de archivo en una página web. Muchas veces mientras navegamos, necesitamos descargar un archivo de documento pero en formato PDF, sin embargo, puede ocurrir un problema de que hay múltiples enlaces de descarga del archivo, pero cada enlace contiene diferentes formatos de archivo. Uno puede contener un archivo de documento y otro puede contener un archivo PDF. No podemos saber fácilmente cuál es cuál simplemente mirando los enlaces.
Por lo tanto, para resolver este problema, podemos divulgar formatos de archivo de enlaces en nuestra página web simplemente usando algunos estilos CSS . Se realiza apuntando al tipo de archivo de los enlaces en la página y agregando una imagen de icono usando el selector ::after y especificando la propiedad de contenido con la ruta del icono. Insertará automáticamente las imágenes del icono en cada enlace adecuado que encuentre en la página que coincida con la extensión del archivo.
Sintaxis:
[href$=" .file_extention "]::after {
content: " " url( path_of_icon );
}
Ejemplo: este ejemplo utiliza ::after selector para mostrar la imagen del formato de archivo después del texto.
HTML
<!DOCTYPE html>
<html>
<head>
<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">
<style type="text/css">
a {
font-family: "Font Awesome 5 Free";
text-decoration: none;
font-size: 24px;
color: black;
}
[href$=".pdf"]::after {
content: ' \f1c1';
color: red;
}
[href$=".docx"]::after {
content: ' \f1c2';
color: green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<hr>
<h3>Display file format of links using CSS</h3>
<a href="GeeksforGeeks.pdf">PDF File</a>
<br><br>
<a href="GeeksforGeeks.docx">Word File</a>
</body>
</html>
Producción:
