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

Кривое подчёркивание ссылок в 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, обновлено 02.02.2021
2907

Комментарии

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

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

Поиск на сайте внешних ссылок и их анкоров
Задача: по файлу sitemap.xml обойти все станицы сайта и найти все внешние ссылки, составить таблицу с адресами станиц и...
1260
0
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
13956
+2
Как отключить тег br
Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими способами.
1951
-1
Работа с JSON в PHP
JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript, который представляет собой набор пар {ключ: значение}. Значение может быть массивом, числом, строкой и...
38195
+9
Извлечение данных с помощью регулярных выражений PHP
Получение данных с помощью функций preg_match и preg_match_all.
14520
+4
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
19913
+2