WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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 linkfelirat 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