Как сделать и убрать подчеркивание ссылок в css
От автора: перед тем, как прийти к вопросу как стилизовать подчеркивание ссылок, мы должны ответить на вопрос: нужно ли нам подчеркивание? В графическом дизайне подчеркивания обычно рассматриваются как примитивный элемент. Есть более красивые способы сделать акцент, установить иерархию и разграничить названия.
«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.
Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.
Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.
Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееWCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:
[…] видимое, но ненавязчивое — позволяющее людям понять, на что можно нажимать, но не обращающее на себя слишком много внимания. Оно должно располагаться на правильном расстоянии от текста, удобно помещаясь позади текста, когда это же место должны занять выступающие части букв.
Для достижения этого традиционно требовались хитрости CSS.
Хаки, которые мы использовали
С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.
Стилизация реальных подчеркиваний
Наконец, мы можем обозначить ссылки без ущерба для стиля благодаря двум новым свойствам CSS.
text-underline-offset контролирует положение подчеркивания.
text-decoration-thickness контролирует толщину подчеркивания.
Согласно блогу WebKit: Вы также можете указать from-font для обоих этих свойств, что задает получение соответствующего показателя из файла используемого шрифта.
UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:
a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }
a { text-decoration: none; border-bottom: #EA215A 0.125em solid; } |

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееОбратите внимание, что это псевдо-подчеркивание явно ниже выступающей части буквы «у»:
Вот тот же параграф при использовании DevTools для применения того же стиля к реальному подчеркиванию с новыми свойствами CSS:
a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }
a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; } |
Вы заметили, что я использую в этом примере кода единицу em. Спецификация настоятельно рекомендует использовать ее, а не пиксели, чтобы толщина соответствовала шрифту. Эти свойства уже реализованы в Safari и появятся в Firefox 70.
С переходом браузера Microsoft Edge на Chromium мы, наконец, получим кросс-браузерную поддержку для свойства text-decoration-style, которое предлагает варианты: solid (по умолчанию), double, dotted, dashed и wavy. В сочетании эти новые свойства открывают целый ряд возможностей.Возможно, это самое большое обновление для подчеркивания в Интернете, и при этом разработчикам нет необходимости что-либо делать. В старые добрые времена выступающие части букв бесцеремонно обрезались подчеркиванием, что было далеко не элегантно. Разработчики привыкли обходить этот недостаток, применяя text-shadow соответствующий цвету фона. text-decoration-skip-ink дает лучший способ создать разрывы подчеркивания вокруг выступающих частей.
Значение по умолчанию auto (слева) и значение none (справа)
Удобно, это установлено как новое значение по умолчанию для подчеркиваний; это означает, что внешний вид подчеркиваний улучшился, в то время как большинство веб-разработчиков даже не знают, что это свойство существует. Если вы хотите, чтобы подчеркивание пересекало выступающие части букв, вы можете установить для этого свойства — none.
Автор: Ollie Williams
Источник: https://css-tricks.com
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
CSS3. Основы
Прямо сейчас изучите CSS3 с нуля!
СмотретьКак в CSS убрать подчеркивание ссылки
Здравствуйте, дорогие друзья!
Давайте сегодня решим такую проблему, как стилизация ссылок на страницах вашего сайта, а именно как в CSS убрать подчеркивание ссылки. Данный вопрос в большинстве случаев возникает у начинающих веб-разработчиков и у тех людей, которые не особо разбираются в CSS, но хотят внести некоторые изменения в оформление своего сайта.
Навигация по статье:
Смотря на какой CMS работает ваш сайт, и какую тему вы используете, могут возникнуть различные варианты оформления ссылок, и соответственно могут возникнуть различные варианты, как вы можете убрать подчеркивание ссылки в CSS. Давайте рассмотрим основные из них.
Отключаем подчеркивание
Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.
Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:
.link-blok a{ text-decoration:none; }
.link-blok a{ text-decoration:none; } |
Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.
Если вам нужно убрать подчёркивание ссылки для всех ссылок на сайте, то в CSS пишем:
a{ text-decoration:none; }
a{ text-decoration:none; } |
Убираем подчеркивание ссылки CSS при наведении
Если же у вас изначально ссылки не имеют подчеркивания, и это подчеркивание появляется при наведении указателя мышки, то вам нужно указывать немного другой селектор, а именно:
.link-blok a:hover{ text-decoration:none; }
.link-blok a:hover{ text-decoration:none; } |
В этом случае мы дописали к селектору псевдокласс hover, который как раз и позволяет задать стили для элемента при наведении указателя.
Используя показанные в данной статье стили, вы сможете с легкостью убрать или добавить подчеркивание для ссылок на вашем сайте. Если у вас возникнут вопросы, вы всегда можете задать их в комментария.
Если статья была для вас полезной делитесь ей в социальных сетях и подписывайтесь на мою рассылку.
Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!
С уважением Юлия Гусарь
Как добавить пунктирное подчеркивание к ссылкам?
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Добавить к ссылкам вместо сплошного подчёркивания пунктирное.
Решение
Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Для создания линии следует использовать свойство border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).
Пример 1. Пунктирное подчеркивание
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пунктирное подчеркивание</title>
<style>
A.dot {
text-decoration: none; /* Убираем подчеркивание */
border-bottom: 1px dashed #000080; /* Добавляем свою линию */
}
A.dot:hover {
color: #f00000; /* Цвет ссылки при наведении на нее курсора */
}
</style>
</head>
<body>
<p><a href="link.html">Обычная ссылка</a> на другую страницу.</p>
<p><a href="#">Ссылка с пунктирным подчеркиванием</a>.</p>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Вид обычной ссылки и ссылки с пунктирным подчеркиванием
Толщина линии и цвет подчеркивания у ссылок также задаются через свойство border-bottom.
CSS оформление ссылок: убираем подчёркивание, меняем цвет
Селекторы псевдо-классов
Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия — «:» и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:
span:hover { color: red; }
Ссылки
Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:
a:link { color: #0000ff; } a:visited { color: #ff00ff; } a:hover { color: #00ccff; } a:active { color: #ff0000; }Попробовать »
Приведенный выше код содержит четыре CSS правила. При этом в каждом из селекторов используется псевдо-класс. Первое правило задает цвет для ссылок, по которым пользователи еще не переходили, если пользователь перешел по ссылке, то будет использовано второе правило. Псевдо-классы :hover и :active динамически изменяют отображение ссылки: :hover стилизует ссылку только в то время, когда над ней находится указатель мыши, а :active только тогда, когда пользователь уже щелкнул по ссылке, но кнопка еще удерживается.
Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.
Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.
Подчеркивание ссылок
По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <p><b><a href="#">обычная ссылка</a></b></p> </body> </html>Попробовать »
Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.
Псевдо-классы :first-child и :last-child
Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> div p:first-child { color: green; } div p:last-child { color: blue; } </style> </head> <body> <div> <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p> <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета, поскольку никаких правил для него не задано.</p> <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем. Цвет текста будет синим.</p> </div> </body> </html>Попробовать »
Поскольку первый абзац является первым дочерним элементом для <div>, его текст будет отображаться зеленым цветом. Цвет текста второго абзаца будет соответствовать цвету заданному по умолчанию, то есть черному. Цвет текста третьего абзаца будет окрашен в синий цвет, поскольку третий абзац является последним дочерним элементом для <div>.
Подчеркивание ссылки добавить удалить примеры
2019/12/18 Марат 52 0 CSS | URL |Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.
Перове что мы теперь делаем, это делаем список всех подпунктов, касающихся нашей темы подчеркивание ссылки! Это, как мне кажется намного стало удобнее и процент ухода пользователя сократился до не бывалых малых величин!
В общем погнали!
Все подпункты о подчеркивании:- Подчеркивание ссылки по умолчанию
- Убрать подчеркивание ссылки css
- При наведении на ссылку — убрать подчеркивание
- При наведении на ссылку — добавить подчеркивание
- Бордюр в качестве подчеркивания ссылки
- Как изменить цвет подчеркивания ссылки?
- Убрать бордюр под ссылкой при наведении
- Изменить цвет подчеркивания под ссылкой при наведении
- Пунктирное подчеркивание ссылки
Подчеркивание ссылки по умолчанию
Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию! Мы делали пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!
div#main_text a.link_default {
color: -webkit-link;
transition: unset;
border: unset;
text-decoration: underline;
}
Здесь мы видим, что есть некое свойство text-decoration, которое имеет значение underline — если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)Поскольку я учился и на «инфаке», то мне и задумываться не нужно… перевод: декорирование текста : подчеркивание…, но и если разложить слово under и + line переводится — под линией
Ну и плюс… вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у
Следующим пунктом уберем подчеркивание у ссылки!
Убрать подчеркивание ссылки css
Как мы уже выше обращали ваше внимание на свойство text-decoration. Чтобы убрать подчеркивание снизу, надо изменить значение text-decoration и поставить nonea.example_1{
text-decoration: none;
}
И добавим такой этот класс нашей ссылке
<a>Пример ссылки с удаленным подчеркивание ссылки!</a>
Результат удаления подчеркивания у ссылки через css
Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса
a{
text-decoration: none;
}
Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котром написаны данные строки, имеет ид#main_text a{
text-decoration: none;
}
При наведении на ссылку — убрать подчеркивание
Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!
Давайте это сделаем! Нам понадобится псевдо класс :hoverЧтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс
<a>Пример удаления подчеркивания ссылки при наведении мышки</a>
Далее к классу с ссылкой добавляем псевдо класс hovera.example_2{
text-decoration: none;
}
a.example_2:hover{
text-decoration: none;
}
Результат удаления подчеркивания при наведении мышки:
При наведении на ссылку — добавить подчеркивание
Чтобы добавить подчеркивание ссылки, возьмем тот код, что убрали подчеркивание по умолчанию и добавим еще один стиль, но уже с hovera.example_1_0{
text-decoration: none;
}
.example_1_0:hover{
text-decoration: underline;
}
Результат добавления ссылки при наведении мышки:
Бордюр в качестве подчеркивания ссылки
Часто используют свойство border для подчеркивая ссылки! Зачем! Как я выше уже написал, то подчеркивание text-decoration: underline; ломается о длинные буквы, например д, чтобы избавиться от этого нам и понадобится бордюр под ссылкой:a.example_1_1{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
Чтобы увеличить зазор между ссылкой и подчеркиванием используем padding-bottompadding-bottom: 1px;
Результат:
Как изменить цвет подчеркивания ссылки?
Берем выше идущий стиль и изменяем подчеркивание на любой другой цвет, например,, пусть цвет текста будет синий, а цвет подчеркивания будет красным:
a.example_1_2{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
Результат подчеркивание ссылки другого цвета:
Убрать бордюр под ссылкой при наведении
Для того, чтобы убрать уже существующий бордюр под ссылкой нужно в hover нужно поставить border-bottom: none; либо просто border: none;a.example_2_0{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
a.example_2_0:hover{
text-decoration: none;
border: none;
}
Результат, как убрать подчеркивание свойства border:
Изменить цвет подчеркивания под ссылкой при наведении
Изменить цвет подчеркивания при наведении — в hover в border-bottom: 1px solid red; red меняем на black.Как подобрать цвет
a.example_2{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
a.example_2:hover{
text-decoration: none;
border-bottom: 1px solid black;
padding-bottom: 1px;
}
Результат изменения подчеркивания цвета при наведении
Пунктирное подчеркивание ссылки
Для изменения свойств линии, например пунктирные подчеркивание нужно заменить solid на dashed Как подобрать цветa.example_3{
text-decoration: none;
border-bottom: 1px dashed red;
padding-bottom: 1px;
}
Результат пунктирное подчеркивание ссылки:
Вас может еще заинтересовать список тем : CSS , URL ,
Последняя дата редактирования : 2020-01-14 11:25
Теги:подчеркивание ссылкиубрать подчеркивание ссылкиcss подчеркивание ссылкиубрать подчеркивание ссылки cssподчеркивание ссылки htmlкак убрать подчеркивание ссылки в htmlссылка без подчеркиванияподчеркивание ссылки при наведениисделать подчеркивание ссылкиубрать нижнее подчеркивание ссылкиссылка без подчеркивания htmlцвет подчеркивания ссылкиссылка без подчеркивания cssподчеркивание ссылки при наведении cssнижнее подчеркивание в ссылкахкак убрать нижнее подчеркивание у ссылок htmlсделать ссылку без подчеркиванияплавное подчеркивание ссылкиубрать подчеркивание ссылки при наведениинижнее подчеркивание ссылки cssотменить подчеркивание ссылкицвет подчеркивания ссылки cssубрать нижнее подчеркивание ссылки cssкак сделать подчеркивание в ссылке htmlплавное подчеркивание ссылки при наведенииплавное подчеркивание ссылки cssподчеркивание ссылки пунктиромкак сделать ссылку без подчеркивания в htmlотменить подчеркивание ссылки cssкак сделать подчеркивание ссылки при наведенииплавное подчеркивание ссылки при наведении cssкак убрать подчеркивание ссылки в html cssпунктирное подчеркивание ссылкиубрать подчеркивание ссылки css при наведениикак сделать подчеркивание ссылки в cssанимация подчеркивания ссылки cssотключить подчеркивание ссылки в cssпри наведении на ссылку появляется подчеркиваниеподчеркивание ссылки пунктиром cssудалить подчеркивание ссылки cssне убирается подчеркивание ссылки cssпрерывистое подчеркивание ссылки css
Красивое css подчеркивание элементов. Как изменить подчеркивание ссылок на веб-странице
На этой странице вы найдете примеры по изменению HTML-ссылок при помощи CSS, который позволяет их делать ссылками-блоками, ссылками-иконками, без подчеркивания, с закругленными углами, изменять между ними расстояние и многое другое. В дальнейшем на основе этих примеров можно создавать различные варианты навигационных меню для сайта.
Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS , который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.
В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.
Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок
сайт — Подчеркивание у ссылокСсылка 1 Ссылка 2 Ссылка 3
Описание примера
- По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS . То есть по умолчанию это свойство, для ссылок, имеет значение underline . Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.
Изначально подчеркивание у ссылок — это сплошная тонкая линия, почти вплотную прижатая к тексту. И в большинстве случаев такого варианта вполне достаточно. Однако иногда дизайн требует, чтобы ссылки подчеркивались не сплошной, а, например, пунктирной линией, или чтобы расстояние от подчеркивания до ссылок было больше стандартного, или само подчеркивание было более жирным. А иногда нужно сделать вообще какое-нибудь экзотическое подчеркивание, например волнистой или разноцветной линией. Все эти варианты и будут рассмотрены в данном примере.
Пример HTML и CSS: пунктирное подчеркивание ссылок
сайт — Создание пунктирного подчеркивания у ссылокСсылка 1 Ссылка 2 Ссылка 3
Описание примера
- Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS , причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось — используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
- Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания — задаем ссылке небольшой нижний отступ с помощью свойства CSS .
- У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку , которую подключаем через CSS . Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить — добавляем ссылке маленький отступ снизу. Теперь все.
- В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom :1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями .
Очень часто для создания меню требуется сделать не просто текстовые ссылки, а ссылки-блоки, у которых активной областью будет как сам текст, так и определенная зона вокруг него.
Как убрать подчеркивание ссылки в HTML
Все ссылки в html по умолчанию подчеркнутые, и отображаются так во всех современных браузерах. Но реалии современного веб дизайна таковы, что нам приходиться убирать подчеркивание у ссылки почти в каждой новой работе.
Например ссылки которые необходимо стилизовать как кнопки в 99% случаев не имеют подчеркиваний, даже в основном тексте ссылки выделят только цветом. И полоска внизу появляется только при ховере. Если вы желаете узнать как сделать анимацию при наведении на ссылку читайте нашу статью на блоге.
Как убрать нижнее подчеркивание у ссылок html?
За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h2-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:
- line-through — перечеркивает ссылку
- overline — добавляет верхнее подчеркивание
- underline — добавляет нижнее подчеркивание
- none — убирает подчеркивание
- initial — устанавливает значение по умолчанию
- inherit — наследует это свойство от родительского элемента
Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none
. Если мы собираемся применить правило ко всем ссылкам на странице пишем:
a { text-decoration: none; }
a { text-decoration: none; } |
Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.
<a href=’google.com’>Google</a>
<a href=’google.com’>Google</a> |
А так же явно указать правило ссылке через селектор класса, идентификатора или дочерний селектор.
.link { text-decoration: none; } #link { text-decoration: none; } .some-block a { text-decoration: none; }
.link { text-decoration: none; }
#link { text-decoration: none; }
.some-block a { text-decoration: none; } |
После того как вы убрали подчеркивание для состояния по умолчанию, вам необходимо позаботиться о пользователе и показать изменение состояния ссылки при наведении и фокусе, обычно это нижнее подчеркивание и изменение цвета ссылки.
В случае с фокус состоянием также может быть обводка, которая совмещается с подчеркиванием. Ее можно убрать, но я не рекомендую этого делать. И так пример.
.link:hover, .link:focus { text-decoration: underline; color: red; } .link:focus { outline: none; //убираем обводку color: red; } .link:focus { outline-color: brown; //меняем цвет обводки color: red; }
.link:hover, .link:focus { text-decoration: underline; color: red; }
.link:focus { outline: none; //убираем обводку color: red; }
.link:focus { outline-color: brown; //меняем цвет обводки color: red; } |
На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.
comments powered by HyperComments