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

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

Используйте свойство text-decoration со значением none для селектора A .

Описание

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

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

Пример 1. Ссылка без подчеркивания

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан ни рис. 1.

Ссылка, у которой отсутствует подчёркивание

Рис. 1. Ссылка, у которой отсутствует подчёркивание

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

How To Change Link Underlines On A Webpage

See now how to edit the style of the link and hiperlink text style on your webpage in an easy way using CSS to make your links looks awesome and more attractive.

By default, web browsers have certain CSS styles that they apply to specific HTML elements. If you do not overwrite these defaults with your site’s own style sheets, then the defaults will apply. For hyperlinks, the default display style is that any linked text will be blue and underlined. The browser does this so that a site’s visitors can easily see what text is linked. Many web designers do not care for these default styles, especially those underlines.

Thankfully, CSS makes it easy to change the look of those underlines or remove them completely.

Change Link Style

REMOVING THE UNDERLINE ON TEXT LINKS

Underlined text can be more challenging to read that non-underlined text. Additionally, many designers simply do not care for the look of underlined text links. In these instances, you will likely want to remove these underlines altogether.

To remove the underlines from text links, you will use the CSS property text-decoration. Here is the CSS you would write to do this:

With that one line of CSS, you would remove the underline from all text links. Even though this is a very general style (it uses an element selector), it still has more specificity than the default browsers styles do. Because those default styles are what creates the underlines to begin with, that is what you need to overwrite.

A CAUTION ON REMOVING UNDERLINES

Visually, the removal of underlines may be exactly what you want to accomplish, but you should be cautious when you do this as well.

Whether you like the look of underlined links or not, you cannot argue that they make it obvious as to which text is linked and which is not. If you take away underlines or change that default blue link color, you should make sure you replace them with styles that still allow linked text to stand out.

This will make for a more intuitive experience for your site’s visitors.

DO NOT UNDERLINE NON-LINKS

Another caution on links and underlines, do not underline text that is not a link as a way of emphasizing it. People have come to expect underlined text to be a link, so if you underline content in order to add emphasis (instead of making it bold or italicizing it), you send the wrong message and will confuse site users.

CHANGE THE UNDERLINE TO DOTS OR DASHES

If you want to keep your text link underlines, but change the style of that underline from the default look, which is a “soldi” line, you can do this too. Instead of that solid line, you can use dots to underline your links. To do this, you will still remove the underline, but you will replace it with the border-bottom style property:

Since you’ve removed the standard underline, the dotted one is the only one that appears.

You can do the same thing to get dashes. Just change the border-bottom style to dashed:

CHANGE THE UNDERLINE COLOR

Another way to draw attention to your links is to change the color of the underline. Just make sure the color fits with your color scheme.

DOUBLE UNDERLINES

The trick to using double underlines is that you have to change the width of the border. If you create a 1px wide border, you’ll end up with a double underline that looks like a single underline.

You can also use the existing underline to make a double underline with other features, such as one of the lines being dotted:

DON’T FORGET THE LINK STATES

You can add the border-bottom style to your links at different states such as :hover, :active, or :visited. This can create a nice “rollover” style experience for visitors when you use that “hover” pseudo class. To make a second dotted underline appear when you hover over the link:

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

По умолчанию все ссылки подчёркнуты синим, но такое оформление легко изменить с помощью CSS-свойства text-decoration: none .

Убираем подчёркивание ссылок в CSS

Допустим, у вас есть ссылка:

Чтобы убрать нижнее подчёркивание, откройте файл со стилями и пропишите:

Вместо селектора по классу можно использовать и другие, например, селектор по типу элемента или атрибуту id .

Убираем подчёркивание ссылок в HTML

Если у вас нет доступа к стилевому файлу или на работе принято инлайнить стили, можете убрать подчёркивание прямо в HTML.

Сбросить стили в одной ссылке:

Убрать оформление во всех ссылках:

Селектор может быть любым — мы для примера показали селектор тега.

Будьте осторожны при сочетании инлайн-стилей и внешнего CSS, ведь стили в атрибуте style сложно переопределить.

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

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

Один и тот же блок текста, но справа хорошо видно ссылки, а слева — нет

Необязательно использовать стили по умолчанию — можно оформить ссылки иначе, например, добавив подчёркивание с помощью анимации, изменив его толщину и начертание или задав другой цвет:

Read Article — ссылки в фирменном цвете

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

Так что, если вам не нравится, как выглядят ссылки — стилизуйте их по-своему. Примеры можете подсмотреть в статье про нестандартное подчёркивание текста на чистом CSS. Главное — не забывайте про UX и старайтесь поменьше инлайнить.

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

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

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

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

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

Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря 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).

Пример 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*="//"] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.