Как убрать подчеркивание у ссылки?
В вашем примере подчеркивания у ссылки нет. И достаточно всего одного text-decoration:none для дефолтного положения ссылки. Проверяйте какие классы еще навешаны на ссылки. Может там вообще border-bottom установлен.
26 июл 2017 в 9:21
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Значит для ваших ссылок как-то был указан другой стиль. Попробуйте поместить код в конец и добавить !important . а для всех псевдоэлементов указывать нет смысла т.к. color и text-decoraition наследуется. а еще может и border установлен.
Отслеживать
2,969 3 3 золотых знака 15 15 серебряных знаков 30 30 бронзовых знаков
ответ дан 26 июл 2017 в 9:21
user245150 user245150
спасибо сработало
26 июл 2017 в 9:25
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Убираем подчеркивание у ссылки с помощью CSS
Средствами непосредственно HTML убрать нижнее подчеркивание у ссылки невозможно. Поэтому для этого используют свойства CSS.
Подчеркивание (также как и выделение текста с помощью надчеркивания и перечеркивания) определяется с помощью свойства text-decoration . Чтобы убрать линию снизу, нужно установить его в значение none .
На примере ниже у ссылки с классом noline удалено подчеркивание.
a.noline
Ниже этот же пример в Codepen, где наглядно видно, как это работает. У ссылки (тег A ) с классом noline линии снизу нет.
Как убрать синий цвет у ссылки
Чтобы убрать у ссылки синий цвет (или подсветку любого другого цвета), надо установить у нее свойства color в значение inherit (использовать свойство родительского элемента), тогда она скорее всего станет такого же цвета, как и обычный текст.
Если это не помогает, то можно таким же образом задать цвет напрямую.
Как убрать подсвечивание ссылки при наведении
Это делается при помощи псевдокласса :hover, срабатывающего при наведении на элемент. Инструкция будет выглядеть так:
Alt linux ssh root или настройка школьного сервера
Как говорится настал час когда срочно приспичил сервер, да не просто сервер а Школьный сервер на базе Alt-Linux server дабы развернуть на нем фильтрующий прокси- сервер. Поставил я сие чудо на Виртуальную машину, и начал мучатся с настройкой ssh долго не копаясь, нашел решение. Авторизация root по умолчанию отключена так давайте её включим . (далее…)
Презентация iPhone 5 онлайн трансляция
Apple официально представила iPhone 5. ВИДЕО, ФОТО
Сегодня 12 сентября 2012 года состоится долгожданная онлайн презентация Iphone 5, которая будет проходить в городе Сан Франциска в 21:00 по московскому времени .
Пока все ждут официальный анонс iPhone 5, появились данные о том, когда же мы увидим его в России. (далее…)
Nuled 1C Битрикс Часть вторая
И так прошло не много времени сто го момента как я начал пользоваться 1С Битрикс, и скажу я вам функционал у движка довольно-таки не плохой, хотя и мне кажется, что там черт ногу сломит. Ну не об это пойдет речь, а о том что прошло пару месяцев и сайт просто-напросто прекратил работу и появилась надпись «Срок работы пробной версии продукта истек. Вы можете купить полнофункциональную версию продукта на сайте www.1c-bitrix.ru. Регистрация» И все, конечно же в последствии я собираюсь приобрести лицензию на данный движок НО, пока на это нет денег а сайт нужен, тем более, на него уже заходят гости и сотрудники. (далее…)
Сайт для детского садика
Решил я тут поделиться своими последними наработками, а именно как я залепил сайт для детского сада. Как сделать сайт для детского сада, спросите вы? Для создания сайта для детского садика можно пойти несколькими путями. Зарегистрироваться на все известной бесплатной площадке для размещения сайтов системе «Юкоз» все наверняка её знаю, это конечно же если вас не обламывает то что наполняя сайт вы развиваете проект на котором потом довольные админы крутят свою тизерную рекламу и вежливо предлагаю купить у вас доступ на сайт без рекламы за не большую плату в месяц. Ну для тех у кого совсем нет денег такой вариант вполне приемлем. Ну а что делать, если хочется красивый сайт и красивое доменное имя ? тогда вам придется не много вложиться и раскошелиться на покупку домена + хостиг ко всему этому немного потраченного времени и сайт у вас уже готов. (далее…)
Как убрать нижнее подчеркивание у ссылок css
Средствами тегов ШТМЛ убрать нижняя полоска в контенте у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (Cascading Style Sheets, CSS (ЦСС)).
Одно из наиболее популярных применений CSS (ЦСС) для ссылок — убирание у них подчеркивания. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что контент, который он видит, является ссылкой. Все ведь уже привыкли — раз нижняя полоска в контенте используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет, или используется и то и другое действие одновременно.
нижняя полоска в контенте прячется с помощью стилевого параметроа text-decoration: none , добавляя его к селектору A , как показано в примере 1.
Пример 1. Убирание подчеркивания у ссылки
Ниже приведен результат выполнения данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
КОМПЬЮТЕРНЫЕ КУРСЫ «ПОИСК»
Основным указанием на то, что перед нами ссылка, является то, что она подчеркнута и ее цвет изменен по сравнению с основным текстом. Такое визуальное оформление используется по умолчанию. Однако в определенных случаях может возникнуть необходимость в отображении ссылки без подчеркивания.
Для того чтобы убрать подчеркивание ссылок, воспользуемся свойством text-decoration . По умолчанию броузер устанавливает значение underline данного свойства для всех элементов a . Поэтому нам достаточно всего лишь установить его значение none для ссылок:
Такой результат был достигнут с помощью следующего CSS-кода:
Рис. 1. Использование свойства text-decoration позволяет убрать подчеркивание для ссылок
Помимо underline и none свойство text-decoration может принимать следующие значения:
Эти значения можно комбинировать. К примеру, если бы вам захотелось оформить ссылку с помощью как нижнего, так и верхнего подчеркивания, как показано на рис. 2, то можно было бы использовать следующее правило стиля:
Рис. 2. Комбинирование различных значений свойства text-decoration позволяет создавать ссылки с нижним и верхним подчеркиванием
Можно создать привлекательный эффект изменения цвета или иных параметров ссылки при наведении на нее указателя мыши. Его можно с успехом использовать в созданных на основе CSS панелях навигации; он применим и по отношению к ссылкам в тексте.
Для создания описанного эффекта необходимо воспользоваться динамическими псевдоклассами якоря :hover и :active . Рассмотрим следующий пример. Ниже представлено типичное правило стиля, в котором описания всех псевдоклассов якоря одинаковы:
a:link, a:visited, a:hover, a:active
Если мы применим данное правило, ссылки будут отображаться синим цветом (#6A5ACD) с подчеркиванием, как на рис. 3.
Рис. 3. Использование одинакового описания для всех псевдоклассов ссылок
Для выполнения поставленной задачи нам нужно удалить селекторы псевдоклассов :hover и :active из общего описания и задать каждому из них свое собственное описание. В приведенном ниже CSS-коде к нижнему подчеркиванию добавлено еще и верхнее. Кроме того, в нем задан фоновый цвет и более темный цвет для текста ссылки. На рис. 4. показан результат обработки данного кода броузером:
Как вы уже наверняка догадались, остальным псевдоклассам также можно задавать отдельные описания. В частности, вы можете захотеть использовать специальное оформление для посещенных ссылок. Для этого нужно составить отдельное описание для псевдокласса :visited.
Рис. 4. Наведение указателя мыши на ссылку, для которой указан специальный стиль при данном событии
При определении стиля для псевдоклассов избегайте изменения размера или начертания шрифта. В противном случае пользователь будет наблюдать постоянное дрожание страницы, ведь окружающий контент будет отодвигаться, чтобы освободить место для отображения более крупного текста при наведении на него указателя мыши.
Порядок следования описаний псевдоклассов. Псевдоклассы якоря должны следовать в порядке :link, :visited, :hover, :active. В противном случае результат обработки кода может отличаться от ожидаемого.
В предыдущей секции мы рассмотрели способ стилевого оформления различных селекторов элемента a, но что делать в том случае, если разные ссылки в одном и том же документе должны выглядеть по-разному? Например, ссылки на панели навигации должны отображаться без подчеркивания, но ссылки в тексте должны быть легко распознаваемы. Или же фон одной части документа темнее, чем фон другой, и здесь ссылки должны быть светлее.
Попробуем создать различные стили для ссылок на примере, в котором мы уже определили один обычный стиль для них:
Данные правила будут использоваться по умолчанию – они описывают стиль отображения обычных ссылок в вашем документе. Первое правило задает синий цвет ссылок, поэтому, если часть страницы будет залита синим фоном, их будет не видно. Следовательно, необходимо создать второй набор стилей, который будет применяться к ссылкам, расположенным в данной области.
Прежде всего, создадим class или id для элемента, в котором будут размещаться ссылки другого цвета. Если стиль контейнера уже задан средствами CSS, у него наверняка есть атрибут class или id, который мы можем использовать для выполнения поставленной задачи. Допустим, документ содержит следующую разметку:
Создадим правило стиля, применимое по отношению ко всем ссылкам внутри элемента класса boxout:
.boxout
.boxout a:link, .boxout a:visited
.boxout a:hover, .boxout a:active
Как видно на ризультате, теперь все ссылки в документе будут отображены в соответствии с первым правилом, за исключением ссылок, размещенных внутри элемента div класса boxout – цвет текста последних будет бо- лее светлым.
Как убрать нижнее подчеркивание у ссылок css
Форум Приднестровской поддержки CMS XOOPS.
По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей
По данным ссылкам можно скачать модули нашей разработки.
Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.
Добро пожаловать на сайт поддержки XOOPS.
Приднестровская поддержка XOOPS
Основным указанием на то, что перед нами ссылка, является то, что она подчеркнута и ее цвет изменен по сравнению с основным текстом. Такое визуальное оформление используется по умолчанию. Однако в определенных случаях может возникнуть необходимость в отображении ссылки без подчеркивания.
Решение
Для того чтобы убрать подчеркивание ссылок, воспользуемся свойством text-decoration . По умолчанию браузер устанавливает значение underline данного свойства для всех элементов a. Поэтому нам достаточно всего лишь установить его значение none для ссылок:
Такой результат был достигнут с помощью следующего CSS-кода:
Рис. 2.5. Использование свойства text-decoration позволяет убрать подчеркивание для ссылок
Обсуждение
Помимо underline и none свойство text-decoration может принимать следующие значения:
• overline
• line-through
• blink
Эти значения можно комбинировать. К примеру, если бы вам захотелось оформить ссылку с помощью как нижнего, так и верхнего подчеркивания, как показано на рис. 2.6, то можно было бы использовать следующее правило стиля:
Рис. 2.6. Комбинирование различных значений свойства text-decoration позволяет создавать ссылки с нижним и верхним подчеркиванием
Совсем другое дело, когда мы имеем дело с ссылками в меню или ссылками, расположенными иным образом так, что не остается никаких сомнений в их предназначении – например, когда их текст оформлен в виде кнопок. В этом случае при желании можно убрать подчеркивание, поскольку множество других факторов указывает на то, что данный текст является ссылкой.
Анимация подчеркивания ссылок на CSS
Дефолтное подчеркивание ссылок в HTML выглядит очень скучно и непривлекательно. Стандартные ссылки имеют синий цвет и нижнее подчеркивание, а на наведении мыши никак не реагируют. На этом уроке вы узнаете, как сделать подчеркивание ссылок более интерактивным.
Убрать подчеркивание ссылки
Прежде чем сделать подчеркивание ссылок более креативным, нужно вообще убрать подчеркивание у ссылок. Добавим всего одно свойство text-decoration со значением none, которое по умолчанию имеет значение underline.
Подчеркивание ссылок при наведении
Теперь сделаем простое подчеркивание ссылок при наведении мышью. Когда мы наводим мышь, ссылка мгновенно подчеркивается, но как только убираем, подчеркивание пропадает. Большинство ссылок в интернете, реализованы с помощью обычного hover-эффекта. Это тоже скучно, давайте сделаем процесс подчеркивания ссылок еще интереснее — с элементами анимации.
Анимация подчеркивания ссылок
Пусть наши ссылки будут подчеркиваться с левой и правой стороны, а также из центра. Создадим HTML-разметку для трех ссылок с разными классами и поместим их в родительский контейнер links.
Общие CSS стили
@import url(«https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap»);
body
.links
a
Далее напишем CSS стили для каждого класса отдельно. Фишка состоит в том, что мы будем анимировать не сами ссылки, а их псевдоэлементы before. Для классов left и right, мы нарисуем линии (нижнее подчеркивание) с нулевой шириной. При наведении на ссылку, линия примет ширину 100%, возникнет эффект плавного подчеркивания ссылки. Фокус с подчеркиванием ссылок заключается в изменении значения ширины линии с 0% до 100% .
Подчеркивание ссылки слева
Подчеркивание ссылки справа
Подчеркивание ссылки по центру
Рисование линии подчеркивания из центра принципиально отличается от предыдущих двух вариантов. Сразу укажем ширину линии нижнего подчеркивания 100%. Свойство transform со значением scale уменьшит ширину элемента до 0, а при наведении увеличит ширину элемента до его изначального размера — значения ширины 100% по горизонтальной оси.
.center a::before
.center a:hover:before
Посмотрите пример на CodePen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Похожие публикации:
- Как обратиться к тегу в css
- Как объявить класс в css
- Сколько на плате arduino uno шим портов
- Чем отличается arduino nano от uno