[Résolu] :before + :after sur même div ?

Bonjour / Bonsoir,

http://codepen.io/Osef/pen/iakdm

Voila, le problème est assez clair je crois. Je comprends pas pourquoi le :after ne veut pas se positionner sur la droite de la div, comme :before se place lui correctement sur la gauche ... Qu'est ce que j'ai loupé ?

Bonjour,

Les pseudo-éléments générés via :before et :after font partie du contenu.
Ils s'inscrivent au début, ou à la fin de la zone de contenu (donc chez toi au début et à la fin de faq-container).
Tes div.faq-contenu, étant des blocs, s'affichent tout naturellement sous le :before et au-dessus du :after.

Tu as choisi de positionner tes pseudo-éléments en absolute, ils sortent donc du flux, c'est pourquoi tes div.faq-contenu remontent dans la page et se retrouvent - par chance - à côté du :before. Mais il est normal que le :after demeure sous les divs.

A priori c'est jouable en absolute, mais il faut donner des coordonnées (top, right, left) aux pseudo-éléments et positionner le référent en relatif.

Je t'ai préparé une solution : http://codepen.io/raphaelgoetter/pen/uKfio
Modifié par Raphael (13 Aug 2013 - 21:16)

Merci beaucoup de ta réponse !
J'oublie souvent que absolute se place en fonction du parent POSITIONNÉ.
Merci encore !