Essaie en mettant les double-points devant tes pseudos éléments :
[data-title]:hover::after
[data-title]::after
Les double-points permettent de faire la différence entre les pseudos classes (hover, active, focus...) et les pseudos éléments (before, after...). Les navigateurs sont supposés supporter les deux notations, cependant, il m'est déjà arrivé de rencontrer des problèmes avec ça. Je n'ai pas creusé le sujet mais je pense que lorsque l'on utilise un pseudo élément et une pseudo classe dans la même règle CSS, il faut leur attribuer leur propre notation.
Attention, c'est pas top pour l'accessibilité, ça.
Un lecteur d'écran ne lira pas data-title, et l'utilisateur aura donc des liens vides dont il n'aura aucune idée de l'utilité ni du contenu. Les pseudo-éléments ::before et ::afterne doivent pas se substituer à du contenu réel.
Écris tes titres dans les liens, mets-les dans un span avec une classe, et agis sur cette classe, plutôt.
- Edité par EmmanuelBeziat 23 mars 2020 à 17:44:33
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Merci du conseil Emmanuel Beziat, heureusement l'idée des data-title à été abandonnée.
Aide toi le ciel t'aidera.
data-title ne marche pas sur certains site..
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Aide toi le ciel t'aidera.
Aide toi le ciel t'aidera.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Aide toi le ciel t'aidera.