28128 sujets

CSS et mise en forme, CSS3

Bonjour à vous tous,

Je voudrais savoir s'il y a moyen de modifier en CSS l'apparence graphique d'un lien. Je parle du souligné du lien et non de la couleur du lien au survol, au clic ou une fois visité. C'est-à-dire que je voudrais modifier l'aspect du lien lui-même. Mettre, par exemple, des pointillés au lieu d'une ligne pleine, grossir ou réduire l'épaisseur du filet, agrandir l'écart entre le lien et le texte au-dessus, etc. Quelqu'un sait si on peut faire ça en CSS ? Je ne trouve aucune information sur Google.

Merci pour votre aide,
et que le code soit avec vous !
Bonjour,
je vois que tu ne cherches pas trop Smiley decu
Est-ce compliqué de taper dans un moteur de recherche "modifier l'aspect d'un lien en css"
Mais comme on ne refuse rien Smiley cligne ,
https://oseox.fr/css/styles-liens.html
https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links
Sinon, tu as un générateur de styles de liens, en ligne.
https://www.kitsgraphiques.net/generateur-css-effets-liens.html
Et bien sûr, tu peux mettre un icône pour activer un lien, ce qui se fait beaucoup sur les mobiles (comme c'est expliqué sur l'un des liens).
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.).
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 :
upload/1666681077-62242-capture.png
.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..