Voici le code en question :
.cta span {
line-height: 1.75rem;
padding-bottom: 6px;
border-bottom: 1px solid #000;
color: #000 !important;
}
Il faut jouer sur le padding-bottom, changer le 6 par une valeur plus basse
.cta span {
line-height: 1.75rem;
padding-bottom: 2px;
border-bottom: 1px solid #000;
color: #000 !important;
}
Bonsoir @Steven et merci pour ton aide,
Hélas ton code ne fonctionne toujours pas :
http://romanolapince.com/report-bugs-WA-fusion/test-lien.html
Cela ne modifie rien.
Merci d’avance pour votre aide.
Bonne soirée.
Ah tu veux reproduire le truc j’avais pas compris
Là ton code pour le lien c’est ça :
.comp_11 .wa-txt-par.wa-last-par a {
color: rgba(35,78,92,1);
font-weight: normal;
text-decoration: underline;
}
Il faut rajouter les éléments qu’on a vu plus haut
.comp_11 .wa-txt-par.wa-last-par a {
color: rgba(35,78,92,1);
font-weight: normal;
text-decoration: none;
line-height: 1.75rem;
padding-bottom: 4px;
border-bottom: 1px solid #000;
}
Bonjour @Steven, bonjour @Tyler, bonjour à tous,
Je viens vous solliciter afin d’avoir un code css afin d’appliquer une ligne apparraissant au survol de la souris.
On m’a donné un code sur un autre forum qui est le suivant :
a {
position: relative;
text-decoration: none;
color: #000000;
padding: 6px 0;
}
a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #000000;
transition: width 200ms ease;
}
a:hover:after {
width: 100%;
}Le problème que j’ai est que quand j’ajoute ce code à l’un de mes textes, il s’ajoute à l’ensemble de mex textes de mon site et cela me sème la pagaille. De plus, le dernier lien du bas n’a pas l’effet si je n’ajoute pas un espace avec la touche Entrer de mon clavier.
Est-ce qu’un pro du CSS pourrait me donner le bon code à ajouter afin d’avoir l’effet voulu et surtout de corriger la pagaille que j’ai s’il vous plait ?
http://romanolapince.com/report-bugs-WA-fusion/shop
Merci d’avance pour vos réponses et votre aide.
Bonne après-midi.
Tu veux avoir cet effet à quel endroit exactement ?
Il faudra définir une class avant, si elle n’existe pas et ajouter ton css sur les a de cette classe
Exemple, si tu veux avoir cet effet que sur les liens du footer il faudra utiliser le css
.footer a {
...
}
.footer a:after {
...
}
.footer:after:hover {
...
}
Là tu as une modif qui concerne tous les liens (a), il faut donc limiter à une zone, voire un lien précis
Bonjour @Steven et merci de m’avoir répondu,
Je veux l’ajouter à chaque zone de texte contenant un lien de mon footer.
Dans WebAcappella, je peux ajouter à chaques zone de texte un code css.
Merci d’avance pour ta réponse et ton aide.
Bonne après-midi.
Je suis sur mobile je te répondrais plus en détails quand je serai sur l’ordi, je pourrais explorer le code dans ton lien
Pour avoir cet effet que dans le footer, supprime tes modifs précédentes et ajoute ça plutôt :
.comp_42 a {
position: relative;
text-decoration: none;
color: #000000;
padding: 6px 0;
}
.comp_42 a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #000000;
transition: width 200ms ease;
}
.comp_42 a:hover:after {
width: 100%;
}
Et pour corriger le petit bug sur les derniers liens qui n’ont pas l’effet :
@media (min-width: 992px) {
.blockcomp-1-comp_3 .wa-txt-par.wa-last-par {
padding: 5px;
}
}
@media (min-width: 992px) {
.blockcomp-1-comp_5 .wa-txt-par.wa-last-par {
padding: 5px;
}
}
Re bonsoir @Steven et merci pour ta réponse,
Franchement merci infiniment pour le code 
Il y reste encore un petit problème et ça sera bon :
L’effet s’ajoute à tous les liens de toutes mes zones de textes.
Si il y avait un moyen de corriger cela ça serait parfait.
Moi je veux que l’effet ne soit ajouté qu’aux zones de textes où j’ajoute le code et non que cela s’ajoute à TOUS les liens de mon site.
Merci d’avance pour ton aide.
Bonne soirée.
Pointe moi exactement où tu veux que l’effet soit appliqué. Là j’ai réduis au footer comme tu m’avais indiqué, ça ne s’applique pas au reste du site
Aux liens de la partie MENU et LIENS UTILES du pied de page :
Merci d’avance pour ton aide.
Bonne soirée.
Essaie ça :
.comp_42 .blockcomp-1-comp_1 a {
position: relative;
text-decoration: none;
color: #000000;
padding: 6px 0;
}
.comp_42 .blockcomp-1-comp_1 a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #000000;
transition: width 200ms ease;
}
.comp_42 .blockcomp-1-comp_1 a:hover:after {
width: 100%;
}
Bonsoir @Steven et merci pour ta réponse,
Cette fois c’est parfait. Merci.
Juste une remarque :
Le code ne s’affiche que sur la page d’accueil :
http://romanolapince.com/report-bugs-WA-fusion/shop
Il ne s’affiche pas sur les autres pages :
http://romanolapince.com/report-bugs-WA-fusion/test-lien.html
Est-ce normal ?
Comment faire pour qu’il s’affiche sur les autres pages ?
Merci d’avance pour ta réponse.
Bonne soirée.
Le footer a une class différente sur les autres pages, c’est dynamique.
Si tu maîtrises l’ajout de css dans le bloc footer (qui sera réutilisé sur toutes les pages), ajoute ce code à ce bloc.
.blockcomp-1-comp_1 a {
position: relative;
text-decoration: none;
color: #000000;
padding: 6px 0;
}
.blockcomp-1-comp_1 a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #000000;
transition: width 200ms ease;
}
.blockcomp-1-comp_1 a:hover:after {
width: 100%;
}
@Steven Tu es mon sauveur. Enfin ! C’est le bon code et ça fonctionne cette fois 
Merci infiniment
Bonne soirée.
@Steven Je viens d’essayer ton code sur un site en production privé dans le footer (comme ce que j’ai fait pour mon site de test) et cela ne fonctionne pas.
Est-ce normal ? As-tu un code pouvant fonctionner sur TOUT sites Internet ?
Merci d’avance pour ta réponse.
Bonne soirée.
Le nom .blockcomp-1-comp_1 qui apparaît dans le css est lié spécifiquement à ton site, ton thème, ce réglage là.
Si tu fais un autre site, ça aura sans doute un autre nom.
Le reste du code, le css lui marchera partout, mais cette class spécifique est liée à ton site, et comment le module webacapella fonctionne.
Pour passer une étape en tant que développeur, tu devras utiliser la fonction inspecter élément des navigateurs, ça te permettra de découvrir (et tester) le css du site ,les noms de class, etc.
Sur ton site test tu peux explorer le css pour voir comment j’ai trouvé le .blockcomp-1-comp_1, et tu peux tenter de trouver le truc similaire sur l’autre site.
C’est la guerre chez Wordpress, un article en anglais résume bien l’affaire
En gros deux gros groupes se battent et les deux sont des cons. Le boss de Wordpress (Mullenweg) qui possède l’organisation mais aussi l’hébergement payant s’attaque à WP Engine qui est un concurrent de l’hébergement payant officiel.
WP Engine est dirigé par des connards qui profitent de Wordpress, Mullenweg profite de sa position pour favoriser l’entreprise qui lui rapporte un max de pognon. En prétextant un combat pour l’open source et utilise des excuses bidons pour s’en prendre à Engine.
Bref, beaucoup de sites utilisent Wordpress, ça peut intéresser de savoir un peu comment ça se développe. Même si je répète mon bref résumé : tous des cons.