"Убрать подчеркивание у :before в CSS при наведении"

Быстрый ответ

Чтобы убрать подчеркивание от псевдоэлемента a:before, воспользуйтесь CSS-свойством text-decoration: none;:

a:before {
  text-decoration: none;
}

Это – самый непосредственный способ убедиться в том, что :before не отображает унаследованные текстовые стили.

Особенности наследования text-decoration

При работе со стилизацией псевдоэлементов важно понимать взаимоотношения свойства text-decoration и псевдоэлементов:

• Цепочка наследования: Не забывайте, что :before по умолчанию наследует текстовые декорации от своего родителя.
• Разрыв цепи: Применение display: inline-block; для :before может прервать это наследование – интересная деталь.
• Специфика при hover: Учитывайте, что использование display: inline-block; приведет к тому, что :before не будет реагировать на изменения родительского элемента при наведении курсора.

Особенности браузеров

Для обеспечения стабильной работы в различных браузерах необходимо учесть их индивидуальные особенности:

Ошибка отображения в IE8-11

В версиях Internet Explorer от 8 до 11 известна ошибка в свойстве display: inline-block;, которая может повлиять на вашу верстку или функциональность.

Подробнее об этом расскажет наш спикер на видео

Учет браузерных спецификаций

Ради обеспечения надежности во всех браузерах рекомендуется следовать определенным принципам:

• Тестируйте ваши решения на локальных HTML-страницах или с использованием таких инструментов как JSFiddle.
• Для старых браузеров готовьтесь к использованию условных стилей или хаков.

Приемы стилизации с помощью шаблонов и фокусов

Работа с декорациями псевдоэлементов может включать не только удаление подчеркивания. Вот несколько советов, которые пригодятся вам при работе с CSS:

От контроля пробелов к управлению белым пространством

Если содержимое :before сужено за счет пробелов, используйте white-space: pre; для сохранения форматирования.

Нюансы реализации эффектов наведения

Если вы хотите изменять поведение псевдоэлемента при наведении курсора на родительский элемент, используйте следующий подход:

a:hover:before {
  display: inline-block;
  text-decoration: none;
  /* "Постарайся меня поймать!" – насмехается :before 😜 */
}

Прибегание к альтернативным решениям

Если display: inline-block; не подойдет, воспользуйтесь альтернативой в виде span. Стилизация через span может решить некоторые проблемы, связанные с псевдоэлементами:

a:before {
  content: "";
  /* До свидания, подчеркивание, на тебя нет больше нужды 😂 */
}
a:hover span {
  text-decoration: underline;
  /* Возвращаем элегантное подчеркивание, но только при наведении 🕺🏻 */
}

Визуализация

Воспринимайте символ ">" в CSS-селекторах как своего рода соединитель:

a:before { text-decoration: underline; }  /* Нежданный "сюрприз" в виде подчеркивания 🎁 */

Теперь удалим этот неожиданный "подарок":

a:before { text-decoration: none; }       /* Нужда в таких сюрпризах отпала, спасибо 🙅‍♀️ */

Продемонстрируем эту модификацию визуально:

До:      [🌉═]
После: [🌉 ]
/* Спокойное пребывание без лишнего подчеркивания 😌 */

Полезные материалы

1. Изучите особенности работы с псевдоклассами в CSS | CSS-Tricks — Тактика успеха во внимании к мелочам.
2. ::before – база знаний CSS | MDN — Настоящее руководство по псевдоэлементу ::before.
3. Селектор ::before в CSS – W3Schools — Научитесь манипулировать ::before.
4. CSS-селекторы: псевдоэлементы — SitePoint — Псевдоэлементы открывают новые возможности.