Utilisation des pseudo-classe :before et :after

Bonsoir à tous,


Je suis en train de me documenter via le net sur la pseudo-classe :after

J'ai donc appris que ça permet donc de rajouter du contenu à la suite d'un autre contenu et non pas d'une balise (enfin il me semble).

Ma question :

Est il possible d'appliquer avec cette méthode sur une balise du type <h2> pour placer le titre à gauche et une décoration totalement à droite?

J'ai tenter de nombreux essais sans succès, il semble qu'on ne puisse pas détacher (visuellement) le contenu de la décoration, les deux restent cote à cote.

Si vous pouviez m'aiguiller ce serait avec plaisir.

Merci par avance.

Bonjour,

dans ce cas-ci, la décoration devrait se trouver en image de fond dans le titre <h2>, et elle sera facile à positionner où bon te semble

Il suffit de doter l'élément de position:relative et le :after d'une position:absolute dans ce contexte (:after et :before génèrent des boîtes enfants de la boîte de l'élément). Avec un résultat plus ou moins accessible ou robuste en cas de largeurs inattendues du contenu.

Mais plus généralement, :after n'étant pas implémenté par IE, son utilisation reste actuellement purement théorique dans la plupart des cas.

Par ailleurs, l'effet en question se fait plus simplement à l'aide du background de l'élément, en effet (grillé je fus, tiens)
Modifié par Laurent Denis (04 Jan 2008 - 18:33)

Merci pour tout mais je rencontre quelques soucis, je pense que j'ai du oublier un tout petit détails dans le CSS mais je vois pas où.

Avant tout, l'utilisation de :after est utilisé pour ajouter une décoration à droite de l'élément qui à déjà un background, il me faut donc 2 background et j'essais de ne pas ajouter de balise inutile dans le code.

L'effet recherché étant de placer un premier background avec un coin arrondi à gauche et un second arrondi à droite le tout étant adaptable à la largeur de l'écran.

Voici ma tentative :

<style type="text/css">
h2 {
	background-color: #00FF00;
	position: relative;
}
h2:after {
	content:"";
	background-color: #FF0000;
	height: 10px;
	width: 10px;
	display: block;
	position: absolute;
	right: 0px;
}
</style>

<h2>titre test</h2>

Si l'effet n'est pas possible, je pensait me tourner vers le javascript, cet élément étant purement décoratif et l'absence de l'effet n'étant pas problématique pour les quelques cas où ça ne fonctionnerai pas.

Voilou, si vous avez quelques conseils complémentaires pour finaliser l'effet avec :after je suis intéressé.