Une classe drapeau avec CSS :before, marche pas

Bonjour

J'ai besoin de me créer une classe CSS .traduction qui affiche automatiquement un petit drapeau à gauche du texte de l'élément, exemple :

<span class="traduction us">elit</span>

Pour faire ça, j'ai pensé utiliser le pseudo élément CSS3 :before, avec un truc du genre :

.traduction:before {
	display:inline-block;
	width:16px;
	height:11px;
	margin-right:5px;
	background:url(./flags.png) no-repeat;
}
.traduction.fr:before {background-position: -16px -11px;}
.traduction.us:before {background-position: 0 -33px;}
.traduction.be:before {background-position: -16px 0;}

Sauf que ça marche pas du tout, ni sous Chrome, ni sous Firefox 14.
J'ai essayé avec un span.drapeau qui remplace le pseudo élément :before, et là ça marche :

<span class="traduction us"><span class="drapeau"></span>elit</span>

Vous pouvez voir tout ça en live ici : experiment html-css-before

Je n'ai encore jamais utilisé :before et :after, ça commence bien

Merci de votre aide.
Modifié par Galdon (30 Jul 2012 - 21:37)

Bonsoir,

La raison pour laquelle rien ne s'affiche est très simple : il manque la propriété CSS content. Un élément généré via :before ou :after doit nécessairement posséder un contenu, même s'il s'agit d'une chaîne de caractère vide, pour être affiché.

.traduction:before {
	display: inline-block;
	width: 16px;
	height: 11px;
	margin-right: 5px;
	background: url(../flags.png) no-repeat;
	[b]content: "";[/b]
}

Ah !

Je suis vert, comme souvent c'est tout con à corriger.

Je trouve ça quand même moyen d'avoir rendu cette propriété obligatoire, c'est bien la première fois que je vois une propriété obligatoire en CSS.

Merci
Modifié par Galdon (01 Aug 2012 - 10:17)

Les pseudos éléments before et after ne sont pas fait pour faire des clear normalement, leur utilisations a été détournée, donc normal de devoir mettre content:"" pour simuler la propriété en elle même