Beispiel:HTML-Links-4.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links auf unterschiedliche Dokumenttypen kennzeichnen</title>
<style>
a[href$=".mp3"] span,
a[type="application/zip"] span {
width: 2.5em;
height: 2.5em;
margin-right: 0.5em;
display: inline-block;
font: 0/0;
color: transparent;
}
a[href$=".mp3"] span{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2099%2099%22%3E%0A%20%20%3Ctitle%3ESymbol%20fuer%20mp3-Datei%3C/title%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20text%20%7B%0A%09%20%20font-size%3A%2030px%3B%0A%09%20%20font-weight%3A%20bold%3B%0A%09%20%20fill%3A%20%23c32e04%3B%0A%09%7D%0A%20%20%3C/style%3E%0A%20%20%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2297%22%20height%3D%2297%22%20fill%3D%22none%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20/%3E%0A%20%20%3Cpath%20id%3D%22rahmen%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20d%3D%22M87%2C20%20l-18%2C-16%20h-55%20a10%2C10%200%200%2C0%20-10%2C10%20v71%20a10%2C10%200%200%2C0%2010%2C10%20h71%20a10%2C10%200%200%2C0%2010%2C-10%20v-55%20h-20%20a10%2C10%200%200%2C1%20-10%2C-10%20v-8%22/%3E%0A%20%20%3Cpath%20id%3D%22noten%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20%2C55%20a6%2C6%200%201%2C0%206%2C6%20v-30%20l25%2C-10%20v30%20a6%2C6%200%201%2C1%20-6%2C-6%22%20/%3E%0A%20%20%3Ctext%20x%3D%2220%22%20y%3D%2285%22%3E.mp3%3C/text%3E%0A%3C/svg%3E");
}
a[type="application/zip"] span{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%2099%2099%22%3E%0A%20%20%3Ctitle%3ESymbol%20fuer%20zip-Datei%3C/title%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22muster1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%226%22%20height%3D%223%22%20fill%3D%22black%22%20/%3E%0A%09%20%20%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%226%22%20height%3D%223%22%20fill%3D%22black%22%20/%3E%0A%09%20%20%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22black%22%20/%3E%0A%09%20%20%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22black%22%20/%3E%09%0A%20%20%20%20%3C/pattern%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20text%20%7B%0A%09%20%20font-size%3A%2030px%3B%0A%09%20%20font-weight%3A%20bold%3B%0A%09%20%20fill%3A%20%23c32e04%3B%0A%09%7D%0A%20%20%3C/style%3E%0A%20%20%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2297%22%20height%3D%2297%22%20fill%3D%22none%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20/%3E%0A%20%20%3Cpath%20id%3D%22rahmen%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20d%3D%22M87%2C20%20l-18%2C-16%20h-55%20a10%2C10%200%200%2C0%20-10%2C10%20v71%20a10%2C10%200%200%2C0%2010%2C10%20h71%20a10%2C10%200%200%2C0%2010%2C-10%20v-55%20h-20%20a10%2C10%200%200%2C1%20-10%2C-10%20v-8%22/%3E%0A%20%20%3Crect%20id%3D%22zip%22%20width%3D%2213.9%22%20height%3D%2230%22%20fill%3D%22url%28%23muster1%29%22%20transform%3D%22translate%2820%2C6%29%20scale%282%2C2%29%22/%3E%0A%20%20%3Ctext%20x%3D%2240%22%20y%3D%2285%22%3E.zip%3C/text%3E%0A%3C/svg%3E");
}
a[href$=".pdf"]:after{
content: "";
display: inline-block;
width: 1.5em;
aspect-ratio: 1;
padding-left: 0.5em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 16 16'%3E%3Cpath id='path843' style='fill:%23cc0000;stroke-width:0.999999' d='M 13.48005,9.1704097 C 12.850318,8.5511222 13,7.7173392 10.155894,8.8349717 9.268076,8.2930868 8.6744685,7.5447892 8.2563764,6.4455484 8.4576757,5.6146796 8.7777031,4.3503112 8.53511,3.5555434 8.3183172,2.203434 6.4104784,2.346625 6.1627153,3.2600647 5.9355991,4.090933 6.1420684,5.246935 6.5240365,6.7229014 6.0078634,7.9563225 5.4122537,9.6039107 4.87028,10.553484 4.3555803,10.667034 2,10.82482 2.2377966,12.937739 c -0.1703454,0.815393 1.3420504,2.848717 3.92807,-1.610147 1.156228,-0.381893 2.4156907,-0.851512 3.5306248,-1.037297 0.9755756,0.526394 1.9575206,1.396425 2.7214566,1.396425 1.31625,0 1.604075,-1.9744253 1.062102,-2.5163103 z M 3.2546495,13.185468 C 3,12.050499 4.5192823,11.663064 4.8238162,11.379215 c 0.083378,0.9917 -1.5691667,1.84237 -1.5691667,1.806253 z M 7.4666232,3.3491143 c 0,0 1.155469,0.85837 0.092994,2.1055747 C 6.3761381,4.9912024 7.3376707,3.3491143 7.4666232,3.3491143 Z M 6.2071604,10.398678 C 6.7078567,9.5265077 7.1362722,8.4892111 7.4821165,7.5757547 7.9105321,8.3550143 8.4576757,8.9794867 9.0357897,9.4078197 7.9621494,9.6297217 7.0278841,10.083867 6.2071604,10.398678 Z m 6.7928406,-0.258036 c 0,0 -0.423263,1.026976 -1.925319,-0.4025523 C 13,8.623847 13.185822,10.01677 13.000001,10.140642 Z' /%3E%3Cpath style='stroke-width:1;fill:%23555753' d='M 3,15 V 1 H 9 V 4.2501467 C 9,4.6656854 9.33437,5 9.75,5 H 13 V 15 Z M 13,4 10,4.00235 V 1 Z M 13.55937,3.0619011 10.9375,0.4405438 C 10.65625,0.1593488 10.275,0 9.87812,0 H 3.5 C 2.67187,0.003 2,0.674868 2,1.502836 V 14.500294 C 2,15.328252 2.67187,16 3.5,16 h 9 C 13.32812,16 14,15.328252 14,14.500294 V 4.1242033 C 14,3.7274009 13.84062,3.3431061 13.55937,3.0619011 Z' /%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
li {
margin-bottom: 1em;
}
li > span {
display:inline-block;
width: 15em;
}
ol a {
display: inline-block;
width: 10em;
}
a:hover, a:focus {
background: #fffbf0;
}
</style>
</head>
<body>
<h1>Links auf unterschiedliche Dokumenttypen kennzeichnen</h1>
<h2>Toptitel der Klassik</h2>
<ol>
<li>
<span data-attribute="title">Europahymne (Beethoven)</span>
<a href="/local/Europahymne.mp3" title="mp3 direkt hören!"><span>mp3</span> (976kB)</a>
<a href="/local/Europahymne.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>ZIP</span> (925kB)</a>
(7. Mai 1824)
</li>
<li>
<span data-attribute="title">Halleluja (Händel)</span>
<a href="#Halleluja.mp3" title="mp3 direkt hören!"><span>mp3</span> (1.236kB)</a>
<a href="#Halleluja.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>zip</span> (1.125kB)</a>
(1743)
</li>
<li>
<span data-attribute="title">kleine Nachtmusik (Mozart)</span>
<a href="#Nachtmusik.mp3" title="mp3 direkt hören!"><span>mp3</span> (1.476kB)</a>
<a href="#Nachtmusik.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>mp3</span> (1.111kB)</a>
(10. August 1787)
</li>
</ol>
<h2>PDFs zum Downloaden</h2>
<ul>
<li><a href="https://src.selfhtml.org/verein/antrag_ordtl_mitglied.pdf">Antrag auf ordentliche Mitgliedschaft</a> (131 kB)</li>
<li><a href="https://src.selfhtml.org/verein/antrag_foerdermitglied.pdf">Antrag auf Fördermitgliedschaft</a> (139 kB)</li>
</ul>
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS">HTML/Tutorials/Links</a>.</p>
<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>
</body>
</html>
