Почему пропадает линия ссылки при вводе text-underline-offset?
Привет! Почему то при вводе text-underline-offset нижнее подчеркивание просто пропадает куда то. С чем это может быть связано?
snippet
Заметил, что в codepen такой проблемы нет
Дополнительно:
.cards__click-info { height: 5px; } |
.cards__click-info { height: 5px; }
Это зачем? Оно точно должно в 5px поместиться?
Собственно и ответ, скорее всего в этом.
Либо где-то overflow.
Если это не так, то нужно доводить песочницу до состояния воспроизводимой проблемы.
По дороге, скорее всего и проблема найдётся.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с пропаданием линии ссылки при использовании свойства text-underline-offset связана с тем, что это свойство не поддерживается во всех браузерах.
Свойство text-underline-offset позволяет задать смещение линии подчеркивания текста относительно его базовой линии. Однако, не все браузеры поддерживают это свойство, поэтому при его использовании могут возникать проблемы с отображением.
Если вам необходимо задать смещение линии подчеркивания текста, рекомендуется использовать альтернативные методы. Например, вы можете использовать псевдоэлементы ::before или ::after для создания подчеркивания с нужным смещением.
Пример использования псевдоэлементов для создания подчеркивания с заданным смещением в CSS:
a { position: relative; text-decoration: none; } a::after { content: ''; position: absolute; left: 0; bottom: -2px; /* задаем смещение вниз на 2px */ width: 100%; border-bottom: 1px solid #000; /* задаем стиль и цвет линии */ }
Таким образом, вы можете создать подчеркивание с нужным смещением, не используя свойство text-underline-offset и обеспечив совместимость с различными браузерами.