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

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

www.badgerfootballforums.com

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

www.BadgerFootballForums.com

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

Можно разбить слова в ссылке с помощью разных цветов. Вот один из множества вариантов:

На наш взгляд, этот вариант очень хорошо подходит, и это можно очень легко создать с помощью короткого кода CSS:

a span {
   color: #971212;
}

И еще изменим ссылку в нужных местах кода HTML, просто обернув слово, которое должно быть другого цвета, в тег span подобным образом:

<a href="#">www.badger<span>football</span>forums.com</a>

Чтобы развить эту идею, можно добавить смену цветов при наведении указателя мыши, например, так:

Для этого нужно только добавить следующий код CSS:

a {
   color: black;
}
a span {
   color: #971212;
}
a:hover {
   color: #971212;
}
a:hover span {
   color: black;
}

Автор урока Chris Coyier

Перевод — Дежурка