1
votes

Comment puis-je déplacer la propriété de soulignement de la décoration de texte pour qu'elle ne coupe pas le texte

Comme j'utilise la famille de polices "Lato Regular 900" et que cela casse la propriété "text-decoration: underline" lorsque je survole le texte. Existe-t-il une solution pour déplacer la propriété de soulignement du côté inférieur. Pour ne pas casser le texte souligné. Comme vu la photo entrez la description de l'image ici

Et je veux comme cette photo entrez la description de l'image ici

Et mon code html est`

<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
<style>
    
a:link {
  text-decoration: none;
   font-family: 'Lato', sans-serif;
}

a:hover {
  text-decoration: underline;
}
</style>
</head>
<body>
<a href='' onmouseover>UI/UX DESIGNING</a>
</body>
</html>

html css css-transitions

2 commentaires

utilisez plutôt la bordure inférieure

Votre code fonctionne bien ici, mais s'il ne fonctionne pas de votre côté, vous pouvez utiliser border-bottom en survol comme suggéré ci-dessus.

3 Réponses :

2
votes

Vous pouvez modifier ce comportement pour forcer le soulignement / surlignage à parcourir le caractère en définissant text-decoration-skip-ink sur none.

a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

4 commentaires

C'est une bonne réponse, probablement la meilleure et la plus correcte, mais n'est malheureusement pas prise en charge sur certains navigateurs populaires :(

Merci pour votre commentaire. Puis-je le déplacer vers le bas par n'importe quelle propriété css

Non, nous ne pouvons pas contrôler le mouvement des lignes de décoration de texte en utilisant uniquement CSS.

Merci pour votre réponse. Cela fonctionne-t-il correctement dans tous les navigateurs?

0
votes

1ère solution:

Veuillez essayer d'utiliser la propriété css border-bottom et vous pouvez appliquer un remplissage à une balise. p >

<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
    <style>
      a:link {
        text-decoration: none;
        font-family: 'Lato', sans-serif;
      }
      a:hover {
        text-decoration: underline;
        text-underline-position: under;
      }
    </style>
  </head>
  <body>
    <a href='' onmouseover>UI/UX DESIGNING</a>
  </body>
</html>

2ème solution:

Veuillez essayer d'utiliser la propriété text-underline-position sur une balise une en survol.

<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
    <style>
      a:link {
        text-decoration: none;
        font-family: 'Lato', sans-serif;
        padding: 2px;
      }
      a:hover {
        border-bottom: 1px solid #0b3a70;
      }
    </style>
  </head>
  <body>
    <a href='' onmouseover>UI/UX DESIGNING</a>
  </body>
</html>

2 commentaires

Je suis au courant de ça. Est-ce fait par la propriété text-decoration

Oui, tu peux faire ça. J'ai mis à jour ma réponse. S'il vous plait verifiez maintenant.

1
votes

utilisez text-underline-position: under;

<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
<style>
    
a:link {
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  text-underline-position:under;
}

a:hover {
  text-decoration:underline;
}
</style>
</head>
<body>
<a href='' onmouseover>UI/UX DESIGNING</a>
</body>
</html>

4 commentaires

Veuillez vérifier @anubhav utiliser border-bottom

Je suis au courant de ça. Est-ce fait par la propriété text-decoration

Maintenant, vérifiez une fois @anubhav

text-underline-position: under; utilisez ceci