:after uitsluiten voor bepaalde gevallen

Status
Niet open voor verdere reacties.

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Hallo
Het kwartje wil niet vallen. Kan iemand mij op weg helpen?

Hoe sluit ik de <a href>'s die een plaatje insluiten, uit van :after
En ook moet dan die padding etc. weer ongedaan - eigenlijk ...

Code:
a:after { content:' «'; }
a { padding:0 .45em; position:relative; z-index:1; } 
/* larger link-area =  bron: http://home.tiscali.nl/developerscorner/css-enlargedLink/large_link-area.htm */

Code:
<a href=""><img src='" /></a>

Liever geen class toevoegen, maar in de style iets als
Code:
a:after img { ?????? }

Kan dat, of is dat onlogisch?

vr groet, janyep
 
Laatst bewerkt:
Leuk puzzeltje inderdaad, wat je kunt volgens mij kunt doen is het volgende.
Code:
a:first-child:after{
content:' «';
}
a img:after{
content:'';
}
Wat dat doet is de :after niet toepassen op de link, maar op het eerste kind dat tussen de <a></a> staat. In het geval van een tekstlink zal dat dus de tekst zijn. Met deze methode valt de « dan al weg bij afbeeldingen omdat :after bij afbeeldingen nog niet goed ondersteund wordt, maar ongetwijfeld gaat dat nog wel komen, dus met het tweede stuk code wordt er lege content achter afbeeldingen gezet.

EDIT: ah en wat die padding betreft:
Code:
a:first-child{
padding:0 .45em;
}

a img{
padding:0;
}

Ik moet daar wel bij zeggen dat, vooral voor de padding, een class toevoegen qua browserondersteuning een beter idee zou zijn. Tenzij je geen rekening hoeft te houden met IE7 en lager.

DEMO
 
Laatst bewerkt:
Bijna ...

Hallo,
dank voor de snelle reactie!

Er staan 12 plaatjes naast elkaar en dat gaat bijna goed.

Maar na de allereerste staat er toch nog een «

Dus ik ga nog maar even puzzelen!
dank, gr janyep

ps nog suggesties?
padding:0 .45em; in combinatie met een :hover {background} is nog actief ...
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan