<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Test</title> <style type="text/css" media="screen"> body { font: 10pt/1.6 "Lucida Grande", "Trebuchet MS", sans-serif; } p.big { font-size: 200%; } a { text-decoration: none; } a:hover, a:focus { color: red; } p.big a:hover, p.big a:focus { background-color: #999; color: #fff; } /* Hintergrundbild */ #background a[href$=".pdf"] { padding-right: 20px; background: url(../../../edit/image/page_white_acrobat.png) no-repeat center right; } #background a[href^="mailto:"] { padding-left: 36px; /* Alle Angaben einzeln, da sonst Hintergrundfarbe überschrieben */ background-image: url(../../../edit/image/mail.png); background-repeat: no-repeat; background-position: center left; } #background a[href^="http://del.icio.us/post?"] { padding-left: 20px; background: url(../../../edit/image/delicious.png) no-repeat center left; } #background a[href^="http://digg.com/submit?"] { padding-left: 20px; background: url(../../../edit/image/digg.png) no-repeat center left; } #background a[href^="callto:"] { padding-left: 20px; background: url(../../../edit/image/phone_sound.png) no-repeat center left; } /* Generierter Inhalt */ #content a[href$=".pdf"]::after { content: "\00a0" url(../../../edit/image/page_white_acrobat.png); } #content a[href^="mailto:"]::before { content: url(../../../edit/image/mail.png) "\00a0"; } #content a[href^="http://del.icio.us/post?"]::before { content: url(../../../edit/image/delicious.png) "\00a0"; } #content a[href^="http://digg.com/submit?"]::before { content: url(../../../edit/image/digg.png) "\00a0"; } #content a[href^="callto:"]::before { content: url(../../../edit/image/phone_sound.png) "\00a0"; } /* Beide Methoden kombiniert */ #both a[href$=".pdf"]::after { content: "\00a0"; padding-right: 16px; background: url(../../../edit/image/page_white_acrobat.png) no-repeat center center; } #both a[href^="mailto:"]::before { content: "\00a0"; padding-left: 32px; background: url(../../../edit/image/mail.png) no-repeat center center; } #both a[href^="http://del.icio.us/post?"]::before { content: "\00a0"; padding-left: 16px; background: url(../../../edit/image/delicious.png) no-repeat center center; } #both a[href^="http://digg.com/submit?"]::before { content: "\00a0"; padding-left: 16px; background: url(../../../edit/image/digg.png) no-repeat center center; } #both a[href^="callto:"]::before { content: "\00a0"; padding-left: 16px; background: url(../../../edit/image/phone_sound.png) no-repeat center center; } </style> </head> <body> <h1>Test aller drei Methoden</h1> <p>Ändern Sie auch die Schriftgrösse, um das Verhalten der Methoden zu beobachten.</p> <hr /> <div id="background"> <h2>Hintergrundbild</h2> <p>Das Jahr 2007 war für die Geschäftszahlen wegen der US Immobilienkrise negativ wie dies dem <a href="Jahresbericht.pdf">Jahresbericht</a> zu entnehmen ist.</p> <p class="big"><a href="mailto:wir@sind.nicht.da">Schreiben Sie uns</a> mal was ganz grosses.</p> <ul> <li><a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei del.icio.us als Lesezeichen hinzufügen</a></li> <li><a href="http://digg.com/submit?phase=2&url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei Digg hinzufügen</a></li> </ul> <p>Für weitere Fragen können Sie uns <a href="callto:0123456789">anrufen</a>.</p> </div> <hr /> <div id="content"> <h2>Generierter Inhalt</h2> <p>Das Jahr 2007 war für die Geschäftszahlen wegen der US Immobilienkrise negativ wie dies dem <a href="Jahresbericht.pdf">Jahresbericht</a> zu entnehmen ist.</p> <p class="big"><a href="mailto:wir@sind.nicht.da">Schreiben Sie uns</a> mal was ganz grosses.</p> <ul> <li><a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei del.icio.us als Lesezeichen hinzufügen</a></li> <li><a href="http://digg.com/submit?phase=2&url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei Digg hinzufügen</a></li> </ul> <p>Für weitere Fragen können Sie uns <a href="callto:0123456789">anrufen</a>.</p> </div> <hr /> <div id="both"> <h2>Beide Methoden kombiniert</h2> <p>Das Jahr 2007 war für die Geschäftszahlen wegen der US Immobilienkrise negativ wie dies dem <a href="Jahresbericht.pdf">Jahresbericht</a> zu entnehmen ist.</p> <p class="big"><a href="mailto:wir@sind.nicht.da">Schreiben Sie uns</a> mal was ganz grosses.</p> <ul> <li><a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei del.icio.us als Lesezeichen hinzufügen</a></li> <li><a href="http://digg.com/submit?phase=2&url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei Digg hinzufügen</a></li> </ul> <p>Für weitere Fragen können Sie uns <a href="callto:0123456789">anrufen</a>.</p> </div> </body> </html>
Sie können den Quelltext auch verändern und durch Klick auf den Knopf sehen Sie dann gleich die Änderungen.
