Как убрать нижнее подчеркивание css

Как убрать подчеркивание ссылки

Если Вы задались таким вопросом, то, скорее всего, Вам плохо знакомы стили CSS. В этой статье я опишу как можно убрать подчеркивание ссылок с помощью CSS, а также расскажу про противоположную задачу как сделать подчеркивание ссылок при наведении и т.п. Рассмотрим все возможные варианты.

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега в CSS.

За подчеркивание ссылок отвечает специальное свойство CSS text-decoration, которое может принимать следующие значения:

Примеры использования text-decoration

Пример №1. Убираем подчеркивание у ссылки

Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:

Вот во что преобразуется этот код:

Последняя ссылка будет с подчеркиванием, поскольку, как я написал ранее, по умолчанию подчеркивание включено.

Пример №2. Убираем подчеркивание при наведение

Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.

Данный код преобразуется в такую ссылку:

Пример №3. Делаем красивое подчеркивание

На последок рассмотрим необычное оформление ссылки, а именно сделаем красивое подчеркивание для ссылки в трех вариантах: пунктирное, сплошное и фоновое. На самом деле это все экзотика, но в некоторых случаях можно сделать сайт более интересным, сделав необычное подчеркивание ссылок.

Преобразуется на странице в:

Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).

Источник

text-decoration

Краткая информация

Версии CSS

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.textDecoration

[window.]document.getElementById(» elementID «).style.textDecorationBlink

[window.]document.getElementById(» elementID «).style.textDecorationLineThrough

[window.]document.getElementById(» elementID «).style.textDecorationNone

[window.]document.getElementById(» elementID «).style.textDecorationOverLine

[window.]document.getElementById( «elementID «).style.textDecorationUnderline

Браузеры

Источник

Подчеркивание ссылок и текста через CSS, свойство text-decoration

В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент.

Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки свойства text-decoration, которое отвечает за функцию подчеркивания в CSS. Этим же способом сможете выделять mailto ссылки на адрес почты на сайте.

Раньше, помнится, поддержка данной опции в стилях была очень слабая, многие браузеры вообще ее не воспринимали. Сейчас ситуация улучшилась, хотя вы все еще рискуете получить неожиданный результат на старых версиях или в IE. Вероятно, совсем скоро наступит время, когда мы сможем задавать однозначное и корректное подчеркивание HTML ссылок / текстов без применения border-bottom. Хотя в одном из примеров прошлой статьи (онлайн журнале Wired) именно оно используется при реализации тренда:

Но вернемся к нашему уроку по верстке и более традиционному методу.

Опиця text-decoration для подчеркивание текста в CSS

Ранее она принимала одно из базовых значений:

Однако в новой редакции стилей предлагаются несколько иные свойства:

Для свойства text-decoration вы можете использовать сразу несколько значений параметров, перечисляя их в одной строке. Рассмотрим их по отдельности…

text-decoration-color — CSS цвет подчеркивания ссылки

Эта опция максимально простая и здесь, в принципе, нечего особо объяснять.
В качестве значение вводите код веб-цвета.

text-decoration-line — расположение линии оформления текста

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для оформления текста / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами шрифта. Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

Начинающие пользователи часто задают некоторые типовые вопросы по теме, поэтому мы также решили их рассмотреть. Общий пример находится в самом низу после пояснений.

Как убрать подчеркивание ссылки

Если ссылка декоративно выделена с помощью линии, то вам нужно найти CSS стиль, в котором прописывается свойство text-decoration и заменить его значение на «none»:

Тут важно правильно определить где именно в задается оформление вашему элементу. У него могут быть сторонние классы и другие дополнительные конструкции (не только тег a). Смотрите как мы реализовали это в примере ниже — абзац с классом «nounder».

Как сделать подчеркивание ссылки при наведении

В CSS для этих целей содержится так называемый псевдокласс hover — по теме есть большая детальная статья о создании hover эффекта в кнопках / картинках и не только (советуем глянуть). Если говорить вкратце, то вам просто нужно прописать обработку события:

Оба примера ниже позволяют понять логику работы при наведении: или вы изначально указываете в CSS подчеркивание ссылок, а потом убираете его в hover, либо наоборот.

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.

Источник

Как убрать подчёркивание ссылки?

Не могу никак убрать подчёркивание ссылки, я только начал изучать программирование, буквально 2 дня назад, и не силён в этом, Надеюсь на ваше понимание и поддержку

Как убрать подчеркивание ссылки
Подскажите пожалуйста как в этом коде убрать подчеркивание ссылки?

Убрать подчеркивание ссылки
На карантине делать нечего, купил курс учу СЕО, в курсе есть уроки HTML/CSS text-decoration: none;.

Как убрать подчеркивание при наведении мышки
в исходном коде написано следующее

Как убрать нижнее подчеркивание с последней строки
Не могу убрать нижнее подчеркивание с последней строки как убрать? На каждый вопрос создавайте.

Как убрать подчеркивание определённого слова в ссылке?
Как убрать подчеркивание определённого слова в ссылке? Например ссылка «Качественный ремонт.

Как убрать подчеркивание заголовка h3 при наведении?
Всем доброго времени суток. Есть вот такой код:

Подчеркивание ссылки
Здравствуйте, как сделать с помощью HTML что б при наведении мышки на анкор-ссылку она станоилась.

Источник

Способы подчеркивания в CSS

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное, они просто хотят создать красивую линию под текстом.

Это самое простое подчеркивание, но у него правильный размер и оно не перекрывает выносные элементы букв. И оно однозначно лучше дефолтного подчеркивания в большинстве браузеров. Medium пришлось столкнуться со сложностями для достижения своего стиля в вебе. Два года спустя, нам все также сложно сделать красивое подчеркивание.

Я считаю, что это все разумные требования, но насколько я знаю, не существует интуитивного способа добиться этого с помощью CSS.

Подходы

Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?

Вот те, которые я рассматриваю:

Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.

text-decoration

text-decoration это самый очевидный способ подчеркивания текста. Вы применяете одно свойство и этого достаточно. На небольших размерах шрифта это может выглядеть вполне прилично, но увеличьте размер шрифта и такое подчеркивание начинает выглядеть неуклюже.

Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.

border-bottom

border-bottom предлагает хороший баланс между простотой и настраиваемостью. Этот подход использует старое доброе свойство CSS для границы, это значит, что вы можете легко изменять цвет, толщину и стиль.

Вот так border-bottom выглядит у строчных элементов.

box-shadow

box-shadow рисует подстрочную линию за счет двух внутренних теней: одна создает прямоугольник, а вторая скрывает его часть. Это значит, что вам нужен однотонный фон для того, чтобы это работало.

background-image

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Фильтры SVG

Вот как это выглядит в Chrome и Firefox:

Underline.js (Canvas)

Несмотря броское название, Underline.js это всего лишь техническое демо. Это значит, что вы не можете просто взять и подключить это в свой проект без изменения кода.

Я решил упомянуть об этом в доказательство концепции, что обладает потенциалом создания прекрасных интерактивных подчеркиваний, но чтобы это заработало, вам надо писать свой JavaScript.

Новые свойства text-decoration

Само по себе это свойство отлично работает, но вы можете добавить несколько экспериментальных свойств для настройки внешнего вида подчеркивания.

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.

text-decoration-style

Вот список доступных значений:

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Чего не хватает

Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.

После небольшого исследования, я нашел еще пару свойств:

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Выводы

Так какой же способ подчеркивания лучший?

Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.

А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы.

Источник