We will improve e-mail links

What is CSS Attribute Selector?
CCS gives us the ability to style elements based on link attributes, rather than the type of the element itself. For example, you already know how to decorate the title element h1:

h1 { color: blue; }

You can define the title attribute a little more clearly:

h1[title] { color: blue; }

We can go even further: What is unique about “soap” links? Now, let's take the experience from the previous examples and build this: The title attribute we put in the hover. This will work, but it may turn out that the text appears immediately after the link. Therefore, we correct the code for this: What happened: [ example ] [*] it will be in place to clarify that, our favorite browser, IE incorrectly displays the code, however, we are used to it.

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); }



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