“Text-decoración” y el “: después de” pseudo-elemento [duplicado]

StackOverflow https://stackoverflow.com/questions/1180910

  •  19-09-2019
  •  | 
  •  

Pregunta

    

Esta pregunta ya tiene una respuesta aquí:

         

Al igual que todas las personas bienpensantes, no me gusta para hacer clic en un enlace y descubre demasiado tarde que conduce a un PDF navegador paralizando o un archivo de Microsoft Office. Yo pensé en hacer la vida un poco más fácil para las personas, mostrando un pequeño icono junto a enlaces que conducen a dichos archivos. Con IE8, finalmente, el apoyo a la pseudo-elemento :after, pensé que la declaración CSS sería bastante simple: 

a.file_pdf:after {
    content:url('/images/pdf.png');
    text-decoration: none;
    padding-left: 5px;
}

En IE8, esto funciona bien. En Firefox y Chrome, sin embargo, text-decoration: none se ignora, y el subrayado se extiende poco atractivo en la parte inferior del icono. ¿Hay una manera de solucionar este problema sin "hacer trampa" mediante el uso de una etiqueta de <span> extra?

¿Fue útil?

Solución

Lo estoy haciendo de una manera diferente, utilizando atribuyen selectores , una imagen de fondo y un acolchado (como también sugirieron ): 

a[href$=".pdf"] {
  padding-right: 21px; /* space for the icon */
  background: url(graphics/pdf.png) no-repeat right bottom;
}

Esto funciona en IE7 también.

Aquí está un ejemplo completo

En Internet Explorer 7 en el icono de PDF no será visible ya que no entiende URIs de datos: 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
  color: #317408;
  background: #eee;
}
a[href$=".pdf"] {
  padding-right: 21px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right bottom;
}
a:hover {
  color: #eee;
  outline: none;
  background-color: #317408;
  text-decoration: none;
}
</style>
</head>
<body>

<p>
   <a href="document.pdf">Here's the PDF</a>
</p>

</body>
</html>

Otros consejos

¿Cómo sobre el uso de la imagen de fondo? 

a.file_pdf {
    background: url('/images/pdf.png') no-repeat right;
    padding-right: 30px;
    ...
}

editar

Prueba y funciona perfectamente en mi FF 3.5, no debe tener ningún problema en la mayoría de los navegadores, ya que sólo mediante la técnica de sustitución de la imagen tradicional.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top