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

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

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

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

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

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

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

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

<html>
<head>
<style type="text/css">
	a{ 
	color: blue; /* цвет ссылки синий */
	font-size:12px; /* размер 12 пикселей */
	} 
	.podcherk /* у ссылки с классом podcherk будет подчеркивание всегда */
	{ 
	text-decoration: underline 
	} 
	.notpodcherk /* у ссылки с классом notpodcherk не будет подчеркивания по умолчанию */ 
	{ 
	text-decoration: none
	}  
	.notpodcherk:hover 
	{ 
	text-decoration: none 
	}  
</style>
</head>
<body>
	<a class="podcherk" href="">Ссылка с подчеркиванием</a>
	<a class="notpodcherk" href="">Ссылка без подчеркивания</a>
	<a href="">Ссылка с подчеркиванием и без class</a>
</body>
</html>

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

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

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

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

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

<html>
<head>
<style type="text/css">
	a{
	color: blue; /* цвет ссылки синий */
	font-size:12px; /* размер 12 пикселей */
	text-decoration: none; /* убираем подчеркивание */
	} 
	a:hover /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */
	{ 
	text-decoration: underline 
	} 
	a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */  
	{
	color:black;
	} 
</style>
</head>
<body>
	<a href="">Ссылка 1</a>
</body>
</html>

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

Ссылка 1

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

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

<html>
<head>
<style type="text/css">
	a {
	color: #000000; /* цвет ссылки */
	text-decoration: none; /* убираем подчеркивание */
	}
	a.link_1 {
	border-bottom: 1px #0000ff dashed; /* пунктирное подчеркивание ссылки */
	zoom:1; /* для IE6 и IE7 */
	}
	a.link_1:hover /* цвет подчеркивания при наведении курсора */
	{ 
	border-color: #00aaff; 
	} 
	a.link_2 {
	border-bottom: 3px #0000ff solid; /* сплошное подчеркивание */
	padding-bottom: 1px; /* отступ между подчеркиванием и ссылкой */
	}
	a.link_2:hover /* цвет подчеркивания при наведении курсора */
	{
	border-color: #00aaff; 
	} 
	a.link_3 {
	background: url("img/fon_off.jpg") 0 100%; /* фон третьей ссылки */
	padding-bottom: 2px; /* отступ от ссылки */
	}
	a.link_3:hover /* фон при наведении */
	{ 
	background: url("img/fon_on.jpg") 0 100%; 
	} 
</style>
</head>
<body>
	<a class="link_1" href="">Ссылка с пунктирным подчеркиванием</a>
	<a class="link_2" href="">Ссылка со сплошным подчеркиванием</a>
	<a class="link_3" href="">Ссылка с подчеркиванием в виде фона</a>
</body>
</html>

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

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

Ссылка со сплошным подчеркиванием

Ссылка с подчеркиванием в виде фона

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

← Перейти в каталог html уроков и советов