CODEWITHSUNDEEP
htmlcsscss-transitions
anubhav
anubhav

Reputation: 21

How can I move text decoration underline property so that It's not break text

As I am using "Lato Regular 900" font family and it breaks the "text-decoration:underline" property when I hover the text. Is there any solution to move the underline property from bottom side. So that it not break the text underline. As seen pic enter image description here

And I want like this pic enter image description here

And my html code is`

<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>

`

Upvotes: 1

Views: 1323

Answers (3)

Priya jain
Priya jain

Reputation: 1147

You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

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

Upvotes: 1

Ritu
Ritu

Reputation: 732

1st solution:

Please try using border-bottom property css and you can apply padding to a tag.

<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>

2nd solution:

Please try using text-underline-position property on a tag on hover.

<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>

Upvotes: 1

Rayees AC
Rayees AC

Reputation: 4659

use 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>

Upvotes: 2

Related Questions