Подчеркивание ссылок в браузере
Обновлено: 08.07.2024
Первое, что мы теперь делаем, это делаем список всех подпунктов, касающихся нашей темы подчеркивание ссылки! Это, как мне кажется намного стало удобнее и процент ухода пользователя, сократился до не бывалых малых величин!
В общем погнали!
Все о добавлении и удалении подчеркивания ссылки:
Подчеркивание ссылки по умолчанию
Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию! Мы делали пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!
Здесь мы видим, что есть некое свойство text-decoration , которое имеет значение underline - если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)Поскольку я учился и на "инфаке", то мне и задумываться не нужно. перевод: декорирование текста : подчеркивание. , но и если разложить слово under и + line переводится - под линией
Ну и плюс. вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у
Следующим пунктом уберем подчеркивание у ссылки!
Убрать подчеркивание ссылки css
Как мы уже выше обращали ваше внимание на свойство text-decoration. Чтобы убрать подчеркивание снизу, надо изменить значение text-decoration и поставить noneИ добавим такой этот класс нашей ссылке
Результат удаления подчеркивания у ссылки через css
Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса
Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котором написаны данные строки, имеет ид id="main_text"При наведении на ссылку - убрать подчеркивание
Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!
Давайте это сделаем! Нам понадобится псевдо класс :hover
Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс
<a удаления подчеркивания ссылки при наведении мышки</a> Далее к классу с ссылкой добавляем псевдо класс hoverРезультат удаления подчеркивания при наведении мышки:
При наведении на ссылку - добавить подчеркивание
Чтобы добавить подчеркивание ссылки, возьмем тот код, что убрали подчеркивание по умолчанию и добавим еще один стиль, но уже с hoverРезультат добавления ссылки при наведении мышки:
Бордюр в качестве подчеркивания ссылки
Часто используют свойство border для подчеркивая ссылки! Зачем! Как я выше уже написал, то подчеркивание text-decoration: underline; ломается о длинные буквы, например д , чтобы избавиться от этого нам и понадобится бордюр под ссылкой:border-bottom: 1px solid red;
Чтобы увеличить зазор между ссылкой и подчеркиванием используем padding-bottomКак изменить цвет подчеркивания ссылки?
Для того, чтобы изменить цвет подчеркивания, ссылки нам понадобится уничтожить подчеркивание по умолчанию :
Далее добавляем цветную линию под ссылкой:
border - бордюр,bottom - внизу,
1px - толщина линии,
solid - линия сплошная,
red - цвет,
Соберем стили для цветного подчеркивания ссылки:
border-bottom: 1px solid red;
Результат подчеркивание ссылки другого цвета:
Убрать бордюр под ссылкой при наведении
Для того, чтобы убрать уже существующий бордюр под ссылкой нужно в hover нужно поставить border-bottom: none; либо просто border: none;border-bottom: 1px solid red;
Результат, как убрать подчеркивание свойства border:
Изменить цвет подчеркивания под ссылкой при наведении
Изменить цвет подчеркивания при наведении - в hover в border-bottom: 1px solid red; red меняем на black.Как подобрать цвет
Как переводится слово solid
Одно из значений слова "solid" - сплошной. Поэтому, линия подчеркивания будет сплошной.
Толщина линии подчеркивания ссылки сделаем в пикселях - 1px.
Цвет подчеркивания красный - red.
border-bottom: 1px solid red;
border-bottom: 1px solid black;
Результат изменения подчеркивания цвета при наведении
Пунктирное подчеркивание ссылки
Следующим пунктом рассмотрим пунктирное подчеркивание ссылки.Возьмем выше приведенный пример и заменим solid .
Цвет подчеркивания задаем в свойстве "border"
Как переводится dashed
Одно из значений слова "dashed" -пунктирный.
border-bottom: 1px dashed red;
Результат : пунктирное подчеркивание ссылки
Плавное подчеркивание ссылки при наведении css
Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!
Сделаем чтобы подчеркивание начиналось слева. При наведении, ссылка будет плавно подчеркиваться и подчеркивание будет начинаться слева. Пока курсор будет над ссылкой.
В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент.
Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки свойства text-decoration, которое отвечает за функцию подчеркивания в CSS. Этим же способом сможете выделять mailto ссылки на адрес почты на сайте.
Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:
Но вернемся к нашему уроку по верстке и более традиционному методу.
Опиця text-decoration для подчеркивание текста в CSS
Ранее она принимала одно из базовых значений:
Однако в новой редакции стилей предлагаются несколько иные свойства:
Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.
Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:
Во второй строке показано как все записывается в один ряд с text-decoration.
Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:
С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:
Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:
Разница, думаю, вполне очевидна.
С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:
Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:
Дополнительные фишки для подчеркивания ссылок
Начинающие пользователи часто задают некоторые типовые вопросы по теме, поэтому мы также решили их рассмотреть. Общий пример находится в самом низу после пояснений.
Как убрать подчеркивание ссылки
Как сделать подчеркивание ссылки при наведении
Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.
От автора: стилизация подчеркиваний ссылок – довольно сложное занятие, и я постоянно забываю, какой способ лучше подходит в той или иной ситуации. К счастью, Джон Джеймсон поможет нам быстро разобраться в этом в своей статье.
Существует множество способов, как стилизовать подчеркивания. Возможно, вы помните статью «создаем подчеркивания ссылок на Medium». Medium не пытались делать что-то из рамок вон выходящее, они хотели просто создать привлекательные подчеркивания в тексте.
Тонкие, черные подчеркивания с пробелами вокруг букв с нижними выносками – работа Марсин Витчэри из статьи создаем подчеркивания ссылок на Medium.
Хорошее стандартное подчеркивание, которое к тому же имеет хороший размер и пропускает нижние выносные части букв. Намного лучше, чем в большинстве браузеров по умолчанию. Как оказалось, Medium столкнулись с множеством проблем на своем пути. И даже два года спустя до сих пор хорошая стилизация подчеркиваний вызывает много проблем.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Почему бы просто не использовать text-decoration: underline? Если мы говорим об идеальном сценарии, подчеркивания должны:
располагаться ниже базовой линии;
пропускать нижние выносные части букв;
менять цвет, толщину и стили;
переходить на новую строку;
работать с любыми фонами.
Я считаю, что мы вполне можем требовать все это от подчеркиваний, однако насколько мне известно, не существует интуитивного способа для решения всех этих задач в CSS.
Подходы
Так какие способы есть в нашем распоряжении для подчеркивания текста? Я вспомнил следующие:
Пройдемся по всему списку и рассмотрим все плюсы и минусы каждого подхода.
Свойство text-decoration
Свойство text-decoration – самый простой способ подчеркивания текста. Нужно применить всего лишь одно свойство. На маленьком тексте такая линия будет смотреться нормально, но стоит увеличить размер шрифта и она уже смотрится неуклюже.
Самая большая проблема со свойством text-decoration – отсутствие кастомизации. Линия использует цвет и размер шрифта того текста, к которому применяется, и не существует кроссбраузерного способа изменения стилей. Чуть позже поговорим более подробно по этому свойству.
Плюсы
располагается ниже базовой линии;
пропускает нижние выносные части букв по умолчанию в Safari и iOS;
перепрыгивает на новую строку;
работает с любыми фонами.
Минусы
не пропускает выносные нижние части букв в остальных браузерах;
нельзя менять цвет, толщину и стили.
Свойство border-bottom
Свойство border-bottom – хороший баланс скорости и кастомизации. Данный подход использует проверенные CSS рамки, а значит, вы с легкостью можете менять цвет, толщину и стили. Так выглядит свойство border-bottom на инлайновых элементах:
Самый большой минус – это то, насколько далеко подчеркивание расположено от текста. Подчеркивание расположено ниже нижних выносных частей букв. Данная проблема решается, если сделать элемент inline-block и уменьшить line-height, но тогда теряется возможность перепрыгивать на новые строки. Хорошо подходит для одиночных строк, но не более.
Кроме того, с помощью text-shadow можно скрыть части линии вокруг нижних выносок. В таком случае вам придется имитировать цвет фона, что означает, что метод работает только на однородных фонах. Градиенты и изображения не подойдут.
На данный момент существует 4 свойства для стилизации подчеркивания. Намного лучше, чем просто text-decoration.
Плюсы
можно пропускать нижние выноски с помощью text-shadow;
можно менять цвет, толщину и стили;
можно использовать свойство transition и анимировать цвет и толщину;
перепрыгивает на новые строки по умолчанию, если элемент не inline-block;
работает с любым фоном, если не использовать text-shadow.
Минусы
линия расположена очень далеко и ее сложно передвинуть;
слишком много лишних свойств нужно задействовать, чтобы подчеркивание хорошо смотрелось;
плохое выделение текста при использовании text-shadow.
Свойство box-shadow
Свойство box-shadow рисует подчеркивание с помощью двух внутренних теней: одна создает прямоугольник, а вторая прячет его. Это означает, что для правильной работы метода нужен однородный фон.
Такой же трюк с text-shadow можно использовать для имитации пропуска вокруг нижних выносок букв. Если цвет линии отличается от текста, или она достаточно тонкая, то проблем возникнуть не должно, как это бывает с text-decoration.
Плюсы
можно расположить под базовой линией;
можно пропускать выноски с помощью text-shadow;
можно менять цвет и толщину;
перепрыгивает на новые строки.
Минусы
нельзя менять стили;
не работает со всеми фонами.
Свойство background-image
Свойство background-image лучше всех решает наши задачи, и у него очень мало минусов. Идея заключается в том, что вы создаете изображение с помощью linear-gradient и background-position, которое повторяется по горизонтальной оси вдоль строк текста. Элемент должен быть display: inline;.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Демо ниже не использует linear-gradient. Для создания крутого эффекта, можете использовать свое изображение.
Плюсы
можно расположить ниже базовой линии;
можно пропускать нижние выноски с помощью text-shadow;
можно менять цвет, толщину (даже на полпикселя) и стили;
работает с пользовательскими изображениями;
перепрыгивает на новые строки;
работает с любым фоном, если не использовать text-shadow.
Минусы
размер изображения может по-разному меняться под разные разрешения, браузеры и уровни увеличения.
SVG фильтры
В чем тут плюс – фильтр добавляет прозрачность, не полагаясь на text-shadow. То есть вы можете пропускать нижние выноски букв на любом фоне, в том числе градиентах и изображениях! Пример ниже работает только с одной строкой текста, так что осторожнее.
А вот так это выглядит в Chrome и Firefox:
В IE, Edge и Safari с поддержкой возникают проблемы. В CSS сложно тестировать поддержку SVG фильтров. Можно использовать правило @supports на filter, но так вы проверите только работу самой ссылки, а не то, применился ли фильтр или нет. Мой способ довольно грубо работает с браузерами, так что будьте вдвойне осторожнее.
Плюсы
расположен ниже базовой линии;
пропускает нижние выноски;
можно менять цвет, толщину и стили;
работает на любом фоне.
Минусы
не перепрыгивает на новые строки;
не работает в IE, Edge и Safari, но можно в качестве фолбэка указать text-decoration. Подчеркивания в Safari сами по себе смотрятся здорово.
Underline.js (Canvas)
Underline.js – удивительная библиотека. Меня впечатляет, что Wenting Zhang смогли сделать с JS и вниманием к деталям. Если вы еще не видели техническое демо Underline.js, остановитесь на минутку и посмотрите. В сети есть замечательное девятиминутное выступление на тему принципов работы, я вам сейчас быстро его перескажу. Подчеркивания рисуются с помощью canvas. Совершенно новый подход, который на удивление хорошо работает.
Несмотря на привлекательное название, это всего лишь техническое демо. То есть вы не сможете сразу поместить библиотеку в проект без целой кучи изменений.
Эту библиотеку стоит упомянуть только лишь, как доказательство концепции. У canvas есть потенциал для создания красивых, интерактивных подчеркиваний, но для правильной работы вам придется написать дополнительный JS код.
Свойства text-decoration-*
Помните, я сказал, что чуть позже мы более подробно разберем что-то? Сейчас этим и займемся. Свойство text-decoration работает хорошо само по себе, но мы можем добавить пару экспериментальных свойств для еще лучшего вида:
Не радуйтесь раньше времени, вы же знаете о поддержке в браузерах.
Свойство text-decoration-color
Свойство text-decoration-color позволяет менять цвет подчеркивания отдельно от цвета текста. У свойства даже неплохая поддержка в браузерах. Оно работает в Firefox и с префиксом в Safari. Есть свой минус – если вы не очищаете линию вокруг выносок, в Safari она ложится поверх текста. Firefox:
Свойство text-decoration-skip
Свойство text-decoration-skip отвечает за пропуск нижних выносок в подчеркиваемом тексте.
Свойство нестандартное и на данный момент работает только в Safari. Для работы в других браузерах нужно использовать префикс –webkit-. В Safari это свойство включено по умолчанию, вот почему подчеркивания пропускают нижние выноски даже на сайтах, где это свойство не указано.
Если вы используете Normalize, вам нужно знать, что последние версии отключают свойство для нормальной работы во всех браузерах. Если вы хотите вернуть эти почти магические подчеркивания, вам нужно включить данное свойство.
Свойство text-decoration-style
Свойство text-decoration-style предлагает тот же набор подчеркиваний, что и свойство border-style, но также добавляет новый вид – wavy. Возможные значения:
Прямо сейчас свойство text-decoration-style работает только в Firefox, ниже показан скриншот:
Набор однотонных подчеркиваний Выглядит похоже?
Что не так?
Свойства text-decoration-* более интуитивны по сравнению с другими свойствами для стилизации подчеркиваний. Однако если по-другому взглянуть на требования, которые мы предъявили ранее, то можно заметить, что с помощью этих свойств нельзя менять толщину и позицию. После небольшого изучения я нашел эти два свойства:
Похоже, эти свойства были выброшены из ранней версии CSS из-за отсутствия интереса к ним. Они так и не применялись. Эй, я в этом не виноват.
Выводы
Так как же лучше всего подчеркивать текст? Все зависит от разных факторов.
Для маленького текста я рекомендую использовать text-decoration и экспериментальное свойство text-decoration-skip, надеясь, что оно будет работать. В большинстве браузеров это смотрится так себе, но так было всегда, и люди не обращали на это внимание. Если вы достаточно терпеливы, есть шанс, что в скором времени все ваши подчеркивания будут хорошо смотреться, и вам ничего не придется менять.
Для основного текста используйте background-image. Метод работает, смотрится красиво, и для него есть Sass миксины. Если подчеркивание тонкое, или цвет отличается от текста, скорее всего, вы можете пропустить метод с text-shadow. Для текста на одной строке используйте border-bottom и любые другие свойства.
А для пропуска выносок букв на градиентных фонах или изображениях попробуйте использовать фильтра SVG. Или же просто не смешивайте такие фоны с подчеркиваниями. В будущем, когда улучшится поддержка в браузерах, можно будет использовать свойства text-decoration-*.
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «CSS Underline: 20+ Examples».
При создании ссылок или анимаций для кнопок меню у вас может возникнуть необходимость использовать подчеркивание. Из этой статьи вы узнаете о нескольких способах создать эффект подчеркивания с использованием CSS-свойств text-decoration , border-bottom , background-image , box-shadow , а также при помощи SVG.
CSS-свойство text-decoration
Давайте посмотрим, как при помощи text-decoration можно сделать простое подчеркивание.
Вот несколько примеров:
Чтобы убрать подчеркивание, нужно просто указать text-decoration: none .
Если вы хотите добавить подчеркивание, которое будет появляться только при наведении курсора, используйте следующие CSS-правила:
А теперь давайте перейдем к более интересным способам подчеркнуть текст.
Градиентное подчеркивание
При помощи свойства background: linear-gradient и других свойств фона можно создать градиентное подчеркивание. Вот пример:
Почитать больше о градиентах можно в статье «CSS Gradients: 8 Examples of Usage».
Короткое подчеркивание
CSS позволяет делать подчеркивание любой ширины и высоты. Оно может быть и короче слова или ссылки. Например, если вам нужно создать короткое подчеркивание, чтобы выделить начало предложения или заголовок, можно использовать псевдоэлемент ::after со свойством border-bottom .
Подчеркивание «маркером»
При помощи свойства transform можно сделать короткое подчеркивание скошенной линией.
Также можно сделать подчеркивание «маркером» длинного куска текста. Пример, на который меня вдохновил Codepen.io/Ash:
Правила, касающиеся этого подчеркивания:
Подчеркивание заголовка
Чтобы подчеркнуть заголовок, можно использовать свойство text-decoration: underline;, но при помощи свойства border-bottom можно сделать красивее. Правда, в последнем случае вам нужно добавить display: inline; , чтобы подчеркивание не было длиннее самого слова.
Многострочное подчеркивание
Допустим, мы хотим создать подчеркивание нескольких строк текста. Для этого подойдут не все способы.
В приведенных ниже примерах использовано свойство background-image , поскольку оно позволяет захватить несколько строк. И хотя вы можете использовать настоящие изображения, в нашем случае это просто линия. Мы используем линейный градиент, чтобы генерировать изображение.
background-repeat: repeat-x; делает подчеркивание горизонтальным.
Если изменять второе значение в background-position: 0 100%; , можно регулировать, насколько далеко от верха должно быть подчеркивание.
Также можно менять второе значение в background-size: 100% 3px; , чтобы подобрать нужную высоту подчеркивания.
Кроме того, можно сделать так, чтобы многострочное подчеркивание показывалось только при наведении курсора.
Использование изображений в качестве подчеркивания в CSS
Для стилизации подчеркивания в CSS также можно использовать изображения (в формате SVG или PNG). Ниже приведены примеры (на основе CodePen автор John D. Jameson).
Анимированное подчеркивание при наведении
Давайте теперь создадим анимированное подчеркивание для кнопок меню. Нам понадобится следующая разметка:
Вот общие стили для четырех примеров (специфические стили будут приведены ниже):
Мы удаляем стандартное значение text-decoration и добавляем границу (border) при помощи псевдоэлементов CSS. Используя свойство CSS transition , мы анимируем этот border.
Анимированное подчеркивание при наведении № 1
Анимированное подчеркивание при наведении № 2
Анимированное подчеркивание при наведении № 3
Анимированное подчеркивание при наведении № 4
Анимированное подчеркивание, созданное при помощи свойства box-shadow
Подчеркивание также можно создать при помощи свойства box-shadow , которое добавляет тень к HTML-элементу. При наведении тень может увеличиваться. Посмотрите на пример:
Здесь мы добавили к элементу <a> две тени:
Почитать больше о тенях можно здесь.
Подчеркивание «от руки», анимированное при наведении
Подобные эффекты мы создадим при помощи масштабируемой векторной графики (SVG). У нас будет HTML-элемент для SVG и блок для текста со ссылками (выбирайте или .ink-svgline , или .link-svgmarker ).
Заменяем комментарий «Invisible SVG block» («Невидимый SVG-блок») на следующий код:
Вот правила CSS, позволяющие спрятать этот элемент:
А эти правила будут общими для обоих примеров:
Первый пример подчеркивания с использованием SVG:
Читайте также: