Кривое подчёркивание ссылок в Google Chrome

Начиная с версии 64 Chrome начал добавлять разрывы в подчеркивании у ссылок, что приводит к следующему результату:

Разрывы в подчеркивании у ссылок

Связано это с введением нового CSS свойства text-decoration-skip-ink которое указывает как делать подчеркивание и значением auto по умолчанию.

none Подчеркивание рисуются по всей длине текстового содержимого
auto Подчеркивание отображаются только там, где оно не касаетсятся буквы

Исправить это можно следующим образом:

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

Результат:

Подчеркивание рисуются по всей длине текстового содержимого
13.03.2018, обновлено 23.11.2022
5167

Комментарии

, чтобы добавить комментарий.

Другие публикации

Перечёркивание текста по диагонали
Несколько примеров как зачеркнуть текст по диагонали с помощью псевдоэлементов CSS :before и :after.
14416
+3
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60810
+7
Как запретить выделение текста на сайте через CSS
Выделение текста в меню, кнопках и других элементах управления лучше запретить т.к. при нескольких кликах он выделяется...
26274
-1
Курсоры в CSS
За вид курсора отвечает CSS свойство «cursor». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.
44315
+9
Работа с JSON в PHP
JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript, который представляет собой набор пар {ключ: значение}. Значение может быть массивом, числом, строкой и...
114271
+15
Как отключить тег br
Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими способами.
10592
-1