Pseudo-élément :after avec technique sprite

Hello,
j’ai un doute, pouvez-vous me dire si je fais fausse route et surtout si cela est possible?

J’ai une balise <h3> avec une classe qui a les propriétés suivantes:

.hika-log h3 {
	background: url("ribbon.png") no-repeat scroll 0 0 transparent;
	color: #F8F8F8;
	display: inline-block;
 	font-size: 28px;
	height: 53px;
	margin-left: -23px;
	padding: 5px 0 0 20px;
	text-align: left;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.65);
	text-transform: none;
	width: 100%;
}

est-il possible de surcharger la balise <h3> avec un pseudo-élément :after qui contient une seule image avec la technique sprite? J’ai essayé avec les propriétés suivantes:

.hika-log h3:after {
	content:url("icons-user-panel.png");
	width:35px;
	height:31px;
	background-position:-10px -51px;
}

...mais j’ai toute l’image qui apparaît. Je dois sûrement avoir cafouillé quelque part.

Merci
Modifié par porcini (19 Jul 2013 - 20:45)

Un sprite se charge en fond d'elements, il te suffit de donner une dimension à ton pseudo-element et d'y afficher ton sprite comme si' s'agissait d'un veritable element.

ne met rien dans content, mais declare le quand même :

.hika-log h3:after {
	content:'';
        background-image:url("icons-user-panel.png");
	width:35px;
	height:31px;
	background-position:-10px -51px;
} 

Modifié par gc-nomade (19 Jul 2013 - 22:10)

Salut,

Effectivement, en déclarant l'URL de l'image comme valeur de la propriété content, tu dis de générer un contenu qui est l'image en question. Il est donc logique que l'image entière apparaisse et que la propriété background-position ne fasse aucun effet.

Bonjour et merci à tous les deux, cependant la solution de gc-nomade ne me donne aucun résultat, pas d'icône en vue ...n'y-a-t-il pas conflit avec la propriété background de la règle .hika-log h3?

il te faut aussi donner un contexte de formatage a ton pseudo-element.
display:inline-block; par exemple.

ok merci, ça marche
...au fait, ce que je viens de comprendre (grâce à vous) c'est qu'un autre bloc conteneur est créée avec le pseudo-élément :after indépendamment de la règle précédente, c'est bien ça?