<\/p>\n<\/p>\n
CSS provides a way to style elements based specifically on attributes of the link, rather than the type of element alone. For example, you already know that you can style a header element:<\/p>\n
h1 { color: blue; }<\/code><\/pre>\nBut you can actually get much more specific and style only header elements that have a title attribute:<\/p>\n
h1[title] { color: blue; }<\/code><\/pre>\nYou can take it even further, and only style header elements that have specific values of attributes:<\/p>\n
h1[title=\"Go Home\"] { color: blue; } \/* Has the exact value \"Go Home\" in the title attribute *\/\r\nh1[title~=\"Go Home\"] { color: red; } \/* Has the value \"Go Home\" somewhere in the title attribute *\/\r\nh1[title^=\"Go Home\"] {color: green; } \/* Value of the title attribute starts with \"Go Home\" *\/<\/code><\/pre>\n <\/p>\n
What is unique about Email Links?<\/h3>\n
An email link differs from all other links because it always begins with “mailto:”, which is the command the browser uses to notify the operating system that the user wants to send an email to a specific email address with the default email program. We can use this similarity between links to our advantage, so that we can apply CSS styling to only email links.<\/p>\n
Here is the rub:<\/p>\n
a[href^=\"mailto\"] { color: blue; }<\/code><\/pre>\nThat will target all links with an href<\/strong> that begins with<\/strong> “mailto”.<\/p>\n <\/p>\n
Finishing the styling<\/h3>\n
Now that we have those links targeted, we can do more than just make them blue. We can also make use of another powerful CSS technique, the “content” property. The content property literally allows you to add content to page elements, even content that you have pulled right from it’s own attributes! Using a psuedo-selector, you specify where you wanted the content added, before or after. <\/p>\n
Let’s get fancy and pull the title attribute from our links and append them after the link itself, on the links hover state:<\/p>\n
a[href^=\"mailto\"]:hover:after { content: attr(title); }<\/code><\/pre>\nThat will work, but it’s going to append that text right after the link, so let’s make sure the formatting looks good and add a little spacing and a > character to seperate the link from text that will be added on rollover:<\/p>\n
a[href^=\"mailto\"]:hover:after { content: \" > \" attr(title); }<\/code><\/pre>\n