Document

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

Пишу сайт по шаблону, и столкнулся с такой проблемой, что никак не могу убрать подчёркивание у ссылок!
Две одинаковых страницы только один на русском, а другой на английском, но оба подключены к одной CSS.
Русская версия

Search 
Notifications 
Profile 

Search 
Notifications 
Profile 

* < text-decoration: none; >body < background: #FCFCFC; margin: 0; >a < color: #000 !important; text-decoration: none; >aside < float: left; background: #333333; height: 100vmax; width: 175px; >aside ul < list-style-type: none; padding: 0px; margin: 0px; >aside div.navigation ul a li < color: #FCFCFC; display: block; padding: 8px 16px; font-family: pfdintextcondpro-regular, serif; font-size: 16px; text-align: center; text-decoration: none; >aside div.navigation ul a li:hover < background-color: #1F2123; border-left: 5px solid #cccc99; transition-delay: 0s; transition-property: background-color, #1F2123; transition-duration: 0.5s; transition-timing-function: ease-out; text-decoration: none; >aside div.navigation < >.logo < margin-top: 36px; text-align: center; margin-bottom: 36px; >.down < margin-top: 295px; >aside div.language < padding-left: 65px; >aside div.language ul a li < font-family: pfdintextcondpro-regular, serif; font-size: 14px; list-style: none; color: #FCFCFC; display: inline-block; margin-right: -0.25em; padding: 4px; text-decoration: none; >.network < text-align: center; margin-top: 25px; >aside div.network ul a li < list-style-type: none; display: inline-block; font-family: pfdintextcondpro-regular, serif; color: #FCFCFC; >@font-face < font-family: pfdintextcondpro-regular; src: url("../../fonts/pfdintextcondpro-regular.ttf") format("truetype"); font-style: normal; font-weight: normal; >

Использовал text-decoration — не помогает

Простой 3 комментария

Перед тем как продолжать с CSS, исправьте ошибки в разметке https://validator.w3.org/nu/
Потом прогоните через этот же валидатор и стили.

Следующим ходом замените флоаты на флексы и/или гриды.
Дальше по обстоятельствам.

aside div.language ul a
ссылкам нужно убирать text-decoration а не вложениям

а вообще кто вставляет li в ссылку? бред сивой кобылы какой то

Я сначала поместил тег «a» в тег «li» появилась эта проблема с подчеркиванием потом поменял местами и все прошло. Позже опять тоже самое.
P. S. Проблема началась после после подключения Bootstrap и Font Awesome.

Мне даже самому интересно стало)
Пробовали ли text-decoration:none!important; ?
А шрифт без подчеркивания? Проверьте в панели разработчика может наследование какое. Коммент сожет быть не о чем но так из виду не потеряю)

a:hover < color: #0056b3; text-decoration: underline; >и даже препроцессор @include hover()

Сам недавно ток приехал, и сел за пк.
ПС: не обращайте внимание на гневные или заумные ответы, кажется многие забыли что значит быть новичком

Хотя бы так. Второе у вас конструкция Html категорически не правильная, прислушайтесь что вам пишут выше. li это элемент списка, ol ul и тп, вы не можете их вставить в отдельный div или же в тег a-href. Судя по всему вам еще рановато вообще что либо писать, изучите матч часть. Не хочу вас обидеть, но таковы реалии, ваш уровень это не уровень новичка, это уровень ничего.

Что бы вам было понятно наверняка: ul — это список, li — это элемент списка, с любым контентом, a это ссылка. В вашем случае в li присутствует контент в виде ссылки a.

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

Ankhena, да я с вами согласен, но человек столкнётся этим в последствии, не поняв почему у p,ul буду отступы, моя ошибка была в том что я не объяснил для чего это вообще. Подчёркивание уберёт сброс стилей.

Прошу прощения за оффтоп, но почему по вашему сброс родных для браузера стилей сомнительная идея? Да возможно не в такой конфигурации, но всё же почему?

FrelFrloich, Несколько ситуаций:
h1 — заголовки. Их можно оставить вообще без отступов? Нет, они слипнутся с остальным текстом и будет нечитаемая каша. Значит, их нужно нормализовать, привести к единому во всех браузерах виду, а не обнулить.
p — аналогично. Красную строку в вебе делать не принято, а значит слипнутся.
ul — вероятно, там где они используются для меню, карточек товаров и других элементов дизайна, им и не потребуются отступы или нужны будут какие-то конкретные, дизайнерские. Но есть еще контентная часть, заполняемая редактором (клиентом). И если в ней будут списки, то они должны иметь отступы и маркеры. Поэтому снова — переопределить, а не обнулить.
body — да. Смотрим в макет, отступ не нужен — обнуляем.

Посмотрите как устроен normalize.css и возьмите оттуда нужное.

Источник

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

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

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

Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration . Вот CSS-код , с помощью которого это можно сделать:

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

Нравится вам подчеркивание или нет, нельзя отрицать того, что оно позволяет указать на связь текста со ссылкой. Если убрать подчеркивание или изменить синий цвет ссылок, то нужно предоставить взамен стили, которые позволяют выделить текст ссылок. Это сделает взаимодействие посетителей с сайтом интуитивным.

Не подчеркивайте текст, не связанный со ссылкой

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст ( с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание ( вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию ( линия » solid » ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

Изменение цвета подчеркивания

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

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

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:

Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

Источник

Стилизация ссылок

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

• ссылки без подчёркивания;
• декоративное подчёркивание;
• выделение фоновым цветом;
• рамки;
• рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

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

Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration : none , следует воспользоваться псевдоклассом :hover . Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none , чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background , присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover , тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding , создающее поля вокруг текста (рис. 2).

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

Пример 6. Изменение цвета рамки у ссылок

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover . Прозрачный цвет указывается с помощью ключевого слова transparent , в остальном стиль не поменяется.

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Рис. 3. Выделение ссылки с помощью рисунка

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] <. >, как показано в примере 7.

Пример 7. Рисунок возле ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

См. также

Источник