Усовершенствуем e-mail ссылки

Веб разработка - CSS

Что такое CSS Attribute Selector?
CCS дает нам возможность стилизовать элементы базирующиеся на атрибутах ссылки, а не на типе самого элемента. Например, вы уже знаете как украсить элемент заголовка h1:

h1 { color: blue; }

Можно немного четче определить атрибут заголовка:

h1[title] { color: blue; }

Можем зайти еще дальше:

h1[title= Go Home ] { color: blue; } /* Значение Go Home в атрибуте заголовка */
h1[title~= Go Home ] { color: red; } /* Значение Go Home где-то в атрибуте заголовка */
h1[title^= Go Home ] {color: green; } /* Значение атрибута заголовка начинается с Go Home */

Что уникального в мыльных ссылках?
А теперь возьмем опыт из предыдущих примеров и соорудим вот это:

a[href^= mailto ]:hover:after { content: attr(title); }

Атрибут заголовка мы поставили в hover. Это будет работать, однако может получится что текст появится сразу-же после ссылки. Поэтому правим код на это:

a[href^= mailto ]:hover:after { content: > attr(title); }