Les pseudo-classes before et after donnent des ailes!

Ailes CSS

Les pseudo-classes :before et :after peuvent paraitre obscures certaines fois, mais quand on voit ce qu’il est possible de faire avec ces petites bêtes, on se dit que ça peut tout de même être intéressant de se pencher dessus. Explications…

_________________________________________________

Avant de commencer, sachez que les outils utilisés ici ne seront pas compatibles avec IE8, mais uniquement les navigateurs récents à partir de Firefox 3.6, Chrome et IE9 pour les plus courants.

_________________________________________________

Une pseudo-what?

Pour ceux qui ne le savent pas, une pseudo classe est une sorte de sous-classe imputable à un élément en particulier. Nous en avons tous utilisé un jour ou l’autre, il s’agit des trucs que l’on rajoute avec des « : » après par exemple un lien, comme par exemple pour définir le style au survol de ce dernier a:hover, ou bien lorsqu’il a été visité a:visited.

Before et after : de la théorie à la pratique

En théorie donc, before permet d’agir sur ce qu’il se passe avant l’élément impacté, et after… après ! Par exemple si l’on souhaite rajouter du contenu avant ou après un titre H1 :

Le HTML :

<span id="monpremiertest">Mon premier test</span>

Et le CSS :

span#monpremiertest:before{
content : "avant le span";
}
span#monpremiertest:after{
content : "après le span";
}

Ce qui donne simplement :

Mon premier test

Notons que ces éléments peuvent être modifiés à notre guise puisque leur style est accessible. En effet, il n’est pas uniquement possible de modifier leur contenu bien entendu, mais également leur positionnement. Par exemple si je souhaite afficher un carré au dessus, et un rectangle en dessous de mon div.

Le code HTML :

<div class="containertest">
	<div id="monsecondtest" />
</div>

et le code CSS :

.containertest {
	position:relative;
	z-index:1;
	width:400px;
	padding: 70px 10px 70px 10px;
	margin:0 auto;
	background:#FAF0D9;
	border: 5px solid #ddd;
}
#monsecondtest{
	display: block;
	width: 400px;
	height: 150px;
	background: #aaa;
	margin: 0; padding: 0;
}
#monsecondtest:before{
	content: "Before";
	left: 10px; top: 10px;
	position:absolute;
	width: 50px;
	height: 50px;
	background: #ff8000;;
}
#monsecondtest:after{
	content: "After";
	left: 10px; bottom: 10px;
	position:absolute;
	width: 400px;
	height: 50px;
	background: #ff8000;;
}

Ce qui donne :

Teaser des prochains billets !

A partir de là, on peut imaginer pas mal de choses. Par exemple, si je vous disais qu’on pouvait réaliser des effets vachement plus sympas comme ceux ci-dessous, vous répondriez « Woa, mais comment? ». On Décortiquera tout ça dans les billets suivants pour thématiser ces tutoriels.

 

exemple

 

monpremiertest

1 commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *