Comment modifier un lien en CSS ?

Ne pas savoir taper les bonnes requêtes de recherche signifie que je ne cherche pas trop ?

ObiJuanKenobi a écrit :
Ne pas savoir taper les bonnes requêtes de recherche signifie que je ne cherche pas trop ?

"Modifier un lien en CSS"

tout simple:

a {
text-decoration: none;
color: #F00;
etc...
}

C'est effectivement tout simple mais ce n'est pas ce que je demandais ! Je demandais comment modifier l'aspect du souligné (épaisseur, type de souligné, écart avec le texte, etc.).

Salut,

Le souligné c'est text-decoration : https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration

Il est pas ultra permissif a part le dot et le wave (je connaissais pas le wave tiens).

Sinon l'idée peut etre de le mettre à none et de jouer avec un border-bottom

J'ai fini par trouver ça :

text-underline-position: under;

qui écarte le souligné du texte mais ne permet pas un contrôle précis.
Je n'ai pas trouvé de propriété CSS permettant d'épaissir le filet.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position#:~:text=In%20the%20horizontal%20text%20we, of%20the%20text%20as%20required.
Modifié par ObiJuanKenobi (24 Oct 2022 - 09:50)

Tiens, je trouve ça dans mon css, si ça peut t'aider :

.lienshaut > a:hover {
    border-bottom: 4px solid #E64A19;}

Je ne sais pas comment faire pour te le montrer, une capture d'écran se fait les liens non survolés. J'ai mis ça sur des liens qui ne sont pas dans des <ul> <li>, mais ça ne change rien.
.lienshaut étant une class container pour des liens <a href...

<div class="lienshaut">
      <a href="#mamoutou" title="Mamoutou Kone" style="color:white;text-decoration:none">mamoutou<span class="trait">/</span></a>
............

La class .trait est là pour mettre un trait oblique entre les liens. Et la couleur des liens change au scroll, avec JavaScript, de façon à devenir noire sur fond blanc qui apparaît. C'est pour ça qu'ils sont en white au départ.
Si tu veux voir l'effet, je te donnerai le lien.
Ajout : Comme je vois que tu parles de lignes discontinues, j'ajouterais ça au css tout en haut de mon post :

border-bottom-style: dashed;

Avec le site de référence qui va avec : https://developer.mozilla.org/fr/docs/Web/CSS/border-style
Modifié par Bongota (24 Oct 2022 - 16:15)

\ô/

ObiJuanKenobi a écrit :
Je n'ai pas trouvé de propriété CSS permettant d'épaissir le filet.

il existe la propriété text-decoration-thickness.

Aaaah yes, merci !
C'est exactement ce que je cherchais.
Par contre, cette propriété n'a pas la même couleur que les autres dans Visual Studio Code.
Elle est blanche alors que dans l'exemple ci-dessous elle est comme les autres.
Voilà ce que je j'obtiens sur mon VS Code :

.code_html:hover, .code_html > a:hover{
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

Cela veut dire que cette propriété posera des problèmes de compatibilité ?
J'ai vérifié sur le Validator CSS de W3C et il n'y a aucun conflit.
Modifié par ObiJuanKenobi (25 Oct 2022 - 08:58)

Les éditeurs de code ne sont pas toujours à jour en ce qui concerne les mot-clés d'un langage. Il peut arriver qu'une syntaxe ne soit pas reconnue par l'éditeur mais soit cependant correcte..