csstdg5figs/08-backgrounds/background-image-link-icons.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding link icons as background images</title>
<style type="text/css">
body {margin: 2em 5em;}
ul, ol {margin: 2em 0; list-style: none;}
li {margin: 0.5em 0;}

ul li + li {font-style: italic;}

a[href] {padding-left: 20px; background: no-repeat center left;}
	a[href$=".pdf"] {background-image: url(i/pdf-icon.png);}
	a[href$=".doc"] {background-image: url(i/msword-icon.png);}
	a[href^="mailto:"] {background-image: url(i/email-icon.png);}

a:hover {color: red;}
</style>
</head>
<body id="www-meyerweb-com" class="css">


<ol>
<li><a href="test.doc">An MS Word file!</a></li>
<li><a href="test.pdf">Here's a PDF for you!</a></li>
<li><a href="mailto:nobody@example.org">Send us email!</a></li>
</ol>

</body>
</html>