personnaliser balise soulignement "u"

[shotgun]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

bonjour tout le monde.

j'ai une petite question. j'aimerai personnaliser la balise de soulignement "u". avec un style de surlignement qui ne prend pas tout le texte. dans ce style : https://i.imgur.com/o3Vp4Tq.png
j'ai essayé pas mal de choses mais je n'arrive à rien. si quelqu'un veut bien m'aider

[Invité]

Hello shotgun,

tout dépend ou tu postes cette balise,
admettons que ce soit dans un message, ce sera cette c.s.s:

Code:

.postbody u {color:orange;}

a++

[*Splash*]

Hi Phil,
Cela ne fait pas l'effet visible sur le screen, ce code met le trait de soulignement en orange mais le texte souligné se retrouve en orange également

[shotgun]

hello.
merci de cette réponse rapide mais en effet, ce n'est pas le bon code. ce n'est pas l'effet que je recherche.
j'aimerai juste que le trait de soulignement soit plus épais, l'opacité baissée et qu'il surligne presque le texte en entier. comme sur la screen en fait.

[*Splash*]

Tu peux utiliser ce code CSS :

Code:

.souligne {
    border-bottom: 3px solid #fff
}

Et pour ce que tu veux souligner il faudra l'entourer entre balises span, ainsi :

Code:

<p>Le texte <span class="souligne">a souligner</span>.</p>

[MasDan]

Bonjour Shotgun,

Essayer ce code. Il devrait correspondre à votre attente.

Code:

#orange {
  background-image: linear-gradient(to bottom, transparent 60%, #f9dec1 40%);
}

[Lixyr]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonsoir,

Inutile de rajouter une classe, si on a déjà une balise qui souligne.

Pour avoir un effet de surlignage partiel (c'est bien ce qui est demandé), il faut en fait utiliser une ombre (source).

Donc le code serait plutôt :

Code:

u {
    text-decoration: none;
    box-shadow: inset 0px -5px 0px rgba(255,165,0, 0.4);
}

Je colle à l'exemple en ajoutant un petit effet transparent à la couleur pour qu'elle soit plus claire.
-5px : épaisseur du trait.
rgba(255,165,0, 0.4); : couleur orange, avec un effet transparent grâce à la valeur 0.4. Plus cette valeur est basse, et plus c'est transparent.

Voilà ce que ça donne sur votre forum :







*edit* Doublée par MasDan, dont la réponse fonctionne aussi. Il suffit juste de modifier le code couleur utilisé par celle que vous souhaitez.

[shotgun]

Lixyr / c'est exactement ça j'te remercie. tu m'enlève une épine du pied !

merci à tous pour vos réponses en tout.