28114 sujets

CSS et mise en forme, CSS3

[Résolu] Compléter un élément vide

Bonjour à tous
Je cherche à faire en sorte que

<a href="...pdf><a>

s'affiche sous la forme d'une icône pdf

Actuellement je fais ça par js mais j'essaie de le faire par css

Je constate que 

a[href$=".pdf"]:empty::before {
	content: url("/pdficon.gif");
  }

ne fonctionne pas car un ::before ne s'affiche pas devant un élément vide.

Y a-t-il une solution ?
Modérateur
Bonjour,

Il n'y a en principe aucune raison pour que cela ne fonctionne pas comme tu le décris.

Peut-être as tu,
- un espace dans ta balise (de fait elle n'est plus vide)
- une autre règle CSS qui cache ces liens vides ? (display, clip, position et coordonnées, autre ..)
- un probléme de cache, qui n'applique pas cette nouvelle règle ?
- une mauvaise URL pour l'image
- ?


cdt,
GC
Modifié par gcyrillus (21 Jan 2024 - 13:44)
Merci de ta réponse
Ce doit être une autre commande quelque part, je vais rechercher ça
Modifié par PapyJP (21 Jan 2024 - 15:21)
Effectivement si je me mets en dehors du contexte des pages CSS du site, ça semble fonctionner. Reste à trouver dans laquelle des centaines de lignes de CSS se trouve la cause de ce comportement.
En fait c'est un script qui est lancé qu chargement de la page et qui supprime les nœuds <a> vides. Dans le contexte d'utilisation, ça a un sens, mais ça rend mon approche impossible.
Je vais regarder comment aborder le problème.
Modérateur
En effet, ç a semble logique. En javascript tu peut utiliser les selecteurs CSS pour exclure certains liens avant d'aller plus loin en partant d'un tableau déjà filtré (non testé) :
let linksPourTraitement = document.querySelectorAll(a:not(a[href$=".pdf"]) ;

Bonne fin de week-end Smiley cligne
Modifié par gcyrillus (21 Jan 2024 - 16:20)
Prévenir un modérateur
Répondre au sujet
Aller à