Met css een externe link voorzien van een icoontje

Werkwijze

Met css kan achter bv. een externe link een icoontje geplaatst worden, dat de lezer erop attent maakt dat je met klikken de huidige site verlaat. Zie hieronder het achter de linkjes.
In de css:

.extern {
     background: url(images/icoontje.gif) no-repeat 0 50%;
     padding: 0 0 0 13px;
     }

In de html:

<a href="http://www.dewereldin.nl/" class="">kom mee naar buiten</a>

Resultaat:

Lorem ipsum dolor sit amet, consectetur adipisicing dit is een gewone interne link elit, sed do eiusmod tempor incididunt ut labore et dit is een externe link dolore magna aliqua. Ut enim ad minim dit is een lekkere lange externe link veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla dit is weer een externe link pariatur. Excepteur sint occaecat cupidatat non dit is wel een hele lange externe link maar dat komt soms wel eens voor proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Problemen!

Wanneer een link aan het einde van de zin afgebroken wordt, gaat deze op de volgende regel verder. Maar browsers gaan heel verschillend om met afbrekingen in een regel...

In Internet Explorer staat het icoontje niet meer netjes achter de link (en hangt soms ergens onderaan op het eind van de eerste regel!).
In Firefox loopt op het eind van de eerste regel de link-onderstreping niet tot het eind van de tekst door (daar wordt de padding van het eind van de link nogmaals toegepast op de onderstreping!).
In Opera: geen problemen.

Is {display: inline-block } de oplossing?

Om IE te dwingen de link als een geheel te zien, kan van de link een inline-block gemaakt worden.
In de css:

.extern {
     background: url(images/icoontje.gif) no-repeat 0 50%;
     padding: 0 0 0 13px;
     display: inline-block;
     }

Resultaat:

Lorem ipsum dolor sit amet, consectetur adipisicing dit is een gewone interne link elit, sed do eiusmod tempor incididunt ut labore et dit is een externe link dolore magna aliqua. Ut enim ad minim dit is een lekkere lange externe link veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore dit is weer een externe link eu fugiat nulla pariatur. Excepteur sint dit is wel een hele lange externe link maar dat komt soms wel eens voor occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ook problemen...

Lorem ipsum dolor sit amet, consectetur adipisicing dit is een gewone interne link elit, sed do eiusmod tempor incididunt dit is een externe link ut labore et dolore magna aliqua. Ut enim ad minim dit is een lekkere lange externe link veniam, quis nostrud exercitation ullamco laboris reprehenderit in voluptate velit dit is weer een externe link eu esse cillum dolore fugiat nulla pariatur. Excepteur sint dit is wel een hele lange externe link maar dat komt soms wel eens voor occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Het icoontje staat nu overal keurig achter de link, maar er zijn ook maren.

In IE en Opera worden nu de links aan het eind van een zin niet afgebroken, en komen in hun geheel op de volgende regel. Die gaten aan de rechterkant van de tekst zijn niet zo mooi voor het oog.
En bij de langere links gaat de gatenkaas ernstig afbreuk doen aan de leesbaarheid van de tekst.
In Opera is de hele link naar hoger in de regel opgeschoven.
In FF worden de links wel middenin afgebroken (net zoals in het eerste voorbeeld), maar er speelt ook nog steeds dat de onderstreping van een link op het eind van de eerste regel wordt ingekort.

NB: Het probleem dat de css niet valideert ... is er niet.
Kijk maar: valideer deze pagina.

Open "Uw gevalideerde Cascading Style Sheet:" om te zien dat er bij a.extern2:link toch echt { display: inline-block; } staat)
Hè? Hoe zit dat? Klik hier voor het geheim van de smid.

Een bijkomend probleem voor IE en Opera is, dat het bij smallere containers (bv. een sidebar met wat links erin) alsnog mis gaat.

De links worden dan noodgedwongen toch over twee regels uitgesmeerd, en de icoontjes staan dan niet aan het eind van de link, maar zweven ergens anders: in de buurt van het eind van een regel. Ze worden door IE en Opera kennelijk verticaal gecentreerd op het midden van de totale hoogte van de regels waar de link in staat.
Zie de kolom hiernaast.

Een alternatief

Proefondervindelijk blijkt dat het in het begin van de link plaatsen van het icoontje vergelijkbare problemen geeft, en dus géén alternatief is. Wat dan wel?
Redenerend dat het bij IE wel goed gaat in korte links, moeten we zien er korte links van te maken, zodat de {display: inline-block; } voor de hele link achterwege kan blijven.
Dat kan door de link op te splitsen in een "gewoon deel" en een "aanhangsel achteraan", dat het icoontje krijgt. Hoe? Een spannetje, dat als background-img het icoontje meekrijgt: om alléén het laatste woord van de link.
Met als html:

<a href="http://www.dewereldin.nl/" class="extern">kom mee naar <span>buiten</span></a>

Volgende stap is, dat hetzelfde ook bereikt kan worden met een andere tag, als die hetzelfde gestyled word als de span (want  is "zoveel tikwerk"). Minder werk geeft bv. de : de "u" van "uitgaand", - en het gaat ook om een bijzondere vorm van onderstreping.

Laatste stap is, dat nu ook de class="extern" gemist kan worden! Want in een gewone interne link wordt de  niet geplaatst.
Daarmee kan de html lekker kort worden:

<a href="http://www.dewereldin.nl/">kom mee naar <u>buiten</u></a>

En de css wordt dan:

a u {
     background: url(images/icoontje.gif) no-repeat 100% 50%;
     padding: 0 13px 0 0;
     }

Zo zit het icoontje nog steeds in de link zelf, en is dus hoverbaar en klikbaar.
Er kan daarom desgewenst ook een hover-verandering voor het icoontje worden gemaakt ( a:hover u {...} ), of een andere kleur aan het icoontje gegeven worden als de link bezocht is ( a:visited u {...} ). , met .
Resultaat op deze manier:

Opmerkingen

De links in het laatste voorbeeld kunnen aangeklikt worden naar een andere pagina, zodat teruggekomen het "visited"-effekt gezien kan worden.
2
De css hover techniek voor gecombineerde background images (hier een voorbeeldje daarvan, en hier de uitleg) kan in dit geval niet toegepast worden, omdat de background-position van de icoontjes zowel in horizontale richting in % moet worden gegeven (100%, om altijd rechts van het laatste woord uit te komen), als in verticale richting (50%, om altijd in het midden van de regel uit te komen). Noch horizontaal, noch verticaal kan dan de positie opgeschoven worden om een ander deel van een gecombineerd img te tonen.
Wat wel kan, is de css preload techniek gebruiken, zodat de icoontjes bij "hover" en "visited" direct beschikbaar zijn, en niet dan pas te hoeven worden opgevraagd door de browser + gedownload van de server, wat een kleine vertraging of flits kan opleveren. Zie helemaal onderaan in de broncode van deze pagina.