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

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

• сделать подчеркивающую линию цветом, отличающимся от цвета самой ссылки;
• использовать для подчеркивания не сплошную линию, а пунктирную или точечную.

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

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

Техническая сторона вопроса

Как всегда будем учиться на практических примерах. Сделаем список ссылок, которые подчеркнуты пунктирной линией. Цвет линии сделаем менее выразительным, чем цвет текста. Стоит отметить, что вместо свойства text-decoration для пунктирного подчеркивания используем border-bottom. Это объясняется тем, что нельзя одновременно через первое свойство указать и цвет, и стиль линии подчеркивания. Записываем в таблицу стилей следующий код:

CSS

а {
	color:#444;
	border-bottom:1px dashed #b0b0b0;
}

Вот так это будет выглядеть в реальных условиях:

Как можно судить из кода, реализация метода очень проста и предельно понятна. Стоит отметить, что это не единственный способ установить подчеркивание. Можно воспользоваться свойством background-image и картинкой вставить подчеркивание, но этот способ проигрывает первому, так как появляется картинка и лишнее обращение к серверу.

Усложняем задачу

Но, как оказалось, такое решение не всегда эффективное. К примеру, нужно реализовать следующий вид ссылок

При этом картинка должна быть тоже активна для перехода по ссылке.

Простой метод

Можно использовать простое решение, но оно не будет соответствовать поставленной задаче:

CSS

а {
	color:#444;
	border-bottom:1px dashed #b0b0b0;
	background:url(img.png) no-repeat;
	background-size:19px;
	padding-left:20px;
	margin-bottom:10px;
}

В таком случае картинка ссылки тоже будет подчеркнута, обратите внимание

Правильное решение

Для решения нашей задачи нам потребуется слегка усложнить HTML-конструкцию кода, добавив вспомогательный тег span:

HTML

<a href="#" ><span>Ссылка1</span></a>

И слегка преобразить код в таблице стилей:

CSS

а span {
	color:#444;
	border-bottom:1px dashed #b0b0b0;
}
а {
	background:url(img.png) no-repeat;
	background-size:19px;
	padding-left:20px;
	margin-bottom:10px;
}

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

В каких браузерах работает?