Как переместить свойство подчеркивания оформления текста, чтобы оно не прерывало текст - PullRequest
Новая
       330

Как переместить свойство подчеркивания оформления текста, чтобы оно не прерывало текст

0 голосов
/ 07 августа 2020

Поскольку я использую семейство шрифтов «Lato Regular 900», оно нарушает свойство «text-decoration: underline» при наведении курсора на текст. Есть ли какое-нибудь решение, чтобы переместить свойство подчеркивания снизу. Чтобы не нарушить подчеркивание текста. Как видно, pi c введите здесь описание изображения

И я хочу, как это изображение введите описание изображения здесь

И мой html код это` 

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

`

Ответы [ 3 ]

2 голосов
/ 07 августа 2020

Вы можете изменить это поведение, чтобы усилить подчеркивание / надчеркивание на go через символ, установив для text-decoration-skip-ink значение none. 

a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
1 голос
/ 07 августа 2020

используйте 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>
0 голосов
/ 07 августа 2020

1-е решение:

Попробуйте использовать свойство border-bottom css, и вы можете применить заполнение к тегу a. 

<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-е решение:

Попробуйте использовать свойство text-underline-position в теге a при наведении. 

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