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

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

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

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

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

• underline (подчеркивание есть);
• none (выключить подчеркивание);

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

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

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

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

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

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

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

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

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

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

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

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

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

Но вообще самое понятное пользователю отображение ссылок — синий подчеркнутый текст (по дефолту так). Поэтому не рекомендуется сильно отходить от этого стереотипа.

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

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Где тут ссылки, а где нет?

Для понимания почему хочу избавится от подчеркивания пример с сайта.

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Судя по приведенному автором примеру, автор не разделяет контент и управление.

Kaliha — ссылки которые интерфейсные (управление), действие которых очевидно, можно не выделять подчеркиванием. В это попадают все элементы из «Комментарии» и уже станет проще.
Ссылки на которые повязан JS (попап окна к примеру) можно выделять пунктиром.

How to remove the underline for anchors(links)?

Is there anyway (in CSS) to avoid the underline for the text and links introduced in the page .. ?

15 Answers 15

Use CSS. this removes underlines from a and u elements:

Sometimes you need to override other styles for elements, in which case you can use the !important modifier on your rule:

This will remove your colour as well as the underline that anchor tag exists with

The simplest option is this:

Of course, mixing CSS with HTML (i.e. inline CSS) is not a good idea, especially when you are using a tags all over the place.
That’s why it’s a good idea to add this to a stylesheet instead:

Or even this code in a JS file:

Use CSS to remove text-decoration s.

Best Option for you if you just want to remove the underline from anchor link only-

This will remove the underline.

Further, you can use a similar syntax for manipulating other styles too using-

Hope this helps!

P.S.- This is my first answer ever!

I’ve been troubled with this problem in web printing and solved. Verified result.

Sometime it will override by some rendering UI CSS. Better to use:

In my case there was a rule about hover-effect by the anchor, like this:

Of course, text-decoration: none; could not help in this situation. And I spend a lot of time until I found it out.

So: An underscore is not to be confused with a border-bottom.

When you want to use an anchor tag simply as a link without the added styling (such as the underline on hover or blue color) add class="no-style" to the anchor tag. Then in your global stylesheet create the class "no-style".

This has two advantages.

1. It will not affect all anchor tags, just the ones with the "no-style" class added to them.
2. It will override any other styling that may otherwise prevent setting text-decoration to none.

To provide another perspective to the problem (as inferred from the title/contents of the original post):

If you want to track down what is creating rogue underlines in your HTML, use a debugging tool. There are plenty to choose from:

For Firefox there is FireBug;

For Opera there is Dragonfly (called «Developer tools» in the Tools->Advanced menu; comes with Opera by default);

For IE there is the «Internet Explorer Developer Toolbar», which is a separate download for IE7 and below, and is integrated in IE8 (hit F12).

I’ve no idea about Safari, Chrome and other minority browsers, but you should probably have at least one of the three above on your machine anyway.