Pseudo classes vraag

[Wary87]

Ik ben bezig met een website waarbij ik d.m.v. een :before een extra visueel element in een img wil oproepen. De image is een blok waaraan een pijl moet komen. Dit wil ik door middel van CSS3 doen (geen background img).

Dit is mijn code:

Cascading Stylesheet:

.logo { position: relative; display: inline-block }
.logo > img:after {
    background: none repeat scroll 0 0 #222222;
    top: 0;
    content: " ";
    display: block;
    height: 9px;
    right: -20px;
    position: absolute;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 9px;
    z-index: 1;
}

HTML:

<a class="logo" href="#">
<img src="#" alt=".." />
<h1>Titel</h1>
</a>

Best basic dus maar wat ik ook probeer ik krijg het niet werkend. Wanneer ik de parent div van het logo relatief maak en de logo div absoluut dan werkt het wel. Dit is niet de oplossing die ik wil omdat de parent div responsive de breedte van de col aanpast.

Waar kijk ik overheen (het is laat..)? Ik hoop dat hier iemand het ziet want ik wil eigenlijk geen onnodige extra divs gebruiken (wat het waarschijnlijk wel oplost met een extra div in de logo div). Ik wil het toch graag op een of andere manier op de img kwijt kunnen omdat andere pseudo's ook gewoon werken zou dit het ook moeten doen zou je zeggen..

[R4gnax]

Een <img> element is een void element. Dat kan en mag geen kind elementen bevatten; ook geen pseudo-elementen. Als een browser deze wèl toont, dan is dat een bug.

[ Voor 21% gewijzigd door R4gnax op 25-06-2013 01:01 ]

[crisp]

http://www.red-team-desig...content-replaced-elements

en volgens de CSS2.1 spec (in de CSS3 module kon ik niets vinden over generated content en replaced elements):

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

[Bosmonster]

R4gnax schreef op dinsdag 25 juni 2013 @ 00:55:
Een <img> element is een void element. Dat kan en mag geen kind elementen bevatten; ook geen pseudo-elementen. Als een browser deze wèl toont, dan is dat een bug.

Wat ik altijd een beetje verwarrend heb gevonden overigens, gezien de naamgeving van "before" en "after". Het is geen append/prepend oid.

De eerste keer dat ik hier tegenaan liep heb ik ook flink met mn hoofd tegen de muur aan staan bonken

[_Thanatos_]

Bosmonster, het is juist wel een append/prepend, want die twee functie inserten content immers in het element, net als de twee pseudo-elementen.

@TS de (vuist?) regel is bij mijn weten dat generated content niet toe te passen is op elementen die geen text-content hebben. Daaronder vallen o.a. <img>, <input>, en <link>. Wat browsers in de praktijk doen als je het tóch probeert, kan uiteraard wisselen.

Als je in je achterhoofd houdt dat het een "insert inner" actie is, is het opeens volkomen logisch dat het niet werkt op een <img>

[ Voor 14% gewijzigd door _Thanatos_ op 25-06-2013 10:13 ]

[Bosmonster]

Nee dat snap ik, maar het is dus raar dat het eigenlijk een append/prepend is, maar de selectors before/after heten

Zeker als je dus simpelweg iets wilt "na een img", dan lijkt het logisch om img:after te gebruiken, maar dat werkt dus niet, omdat het niet echt een "after" is.

[ Voor 41% gewijzigd door Bosmonster op 25-06-2013 11:07 ]

[Wary87]

Bedankt voor de goede input! Eigenlijk heel logisch dat het niet kan op een image (dom dom). Ik zal toch maar gebruik maken van een extra div of span om de pseudo class op toe te passen.