Bonjour tout le monde ! 

Petit soucis avec quelque chose de nouveau pour moi, les data-title. 

Mon code marche très bien en local mais quand je viens à le mettre sur mon site web hébergé, rien ne fonctionne.. 

Après quelques recherche je n'ais pas trouver de quoi m'éclairer, peut être que ici quelqu'un pourras m'aider

Voici mon code qui marche nickel en local :

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.1s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #000;
    color: #111;
    font-size: 20px;
    position: absolute;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:20px;
    bottom: -3em;
    left: -50%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    color:#fff;
    height:30px;
}
[data-title] {
    position: relative;
}

Merci pour votre aide.

<li><a href="#" data-title="Home"><i class="fas fa-home"></i></a></li>
<li><a href="#" data-title="About"><i class="fas fa-award"></i></a></li>
<li><a href="#" data-title="Services"><i class="fas fa-briefcase"></i></a></li>

Salut, 

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.

Tiens-nous au courant !

Bonjour,

Si je me base sur cette phrase : "Mon code marche très bien en local mais quand je viens à le mettre sur mon site web hébergé, rien ne fonctionne.. "

La première chose à faire selon moi est de vider le cache du navigateur. 

Yeeeeeeees !!! Merci OffKors !!

tu à vue juste et je t'en remercie

Merci Mewen_bzh pour ce rappel même si je fait ça quasiment tous les jours x) 

Salut,

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 ::after ne 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