Fájlformátum dinamikus jelölése

A jellemzőérték-vége kijelölő felhasználásával automatikusan a link href tulajdonságában megadott fájl típusától függő képet illeszthetünk a link-felirat elé a :before álelem vagy mögé az :after álelem segítségével.

1. Példa:

Forráskód


<style>
  a[href$='.pdf']:after 
      {content:  " "  url("pdf_ikon.png");}
  a[href$='.odt']:after 
      {content:  " "  url("odt_ikon.png");}
  a[href$='.doc']:after, 
  a[href$='.docx']:after 
      {content: " " url("word_ikon.png");}
</style>     
</head>
<body>            
  <a href="....pdf">demo.pdf</a><br>
  <a href="....odt">demo.odt</a><br>
  <a href="....doc">demo.doc</a><br>  
  <a href="....docx">demo.docx</a>   
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_link_after_01.html