C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Les pseudo-éléments :before et :after, mode d'emploi

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 2912



:before & :after


Informations générales

Description :
Dans ce tutoriel, nous allons voir comment fonctionnent les pseudo-éléments CSS :before et :after. Nous l'appliquerons à un exemple pratique pour changer l'apparence des liens au survol (voir ci-dessous)

Démo :
Exemple : survolez moi !

Testé sur :
Firefox, Chrome, Opéra, Internet Explorer

Crédits :
Proposé par Basil Hawkins le 05/03/2010 | Validé par Basil Hawkins

Mise(s) à jour :
Mise à jour le 07/09/2012 par Faucon & 'Christa

Le tutoriel


Quelques petites définitions à connaître


Avant de commencer ce tutoriel, une petite leçon d'anglais pour ceux qui auraient un peu de mal avec toutes ces propriétés CSS en anglais :
  • before signifie avant
  • after signifie après
  • hover signifie survoler
  • content signifie contenu
Ce tutoriel traitant de pseudo-éléments, on en profite pour expliquer ce dont il s'agit : Les pseudo-classes et pseudo-éléments se distinguent des sélecteurs CSS classiques par la présence du symbole : qui les précède.
- Un pseudo-élément est en quelque sorte un élément (HTML) que l'on "rajoute" au HTML par le CSS. C'est le cas de :before et :after, mais aussi de :first-letter par exemple. Ce sont tous les effets que l'on pourrait placer directement dans le code HTML mais qu'on gère par le CSS pour diverses raisons (par exemple si on souhaite voir tous les titres précédés d'un •, le faire par CSS sera plus rapide que d'éditer tous les titres qui passent)
- Une pseudo-classe quant à elle s'occupe d'effets qu'on ne pourrait pas gérer par le HTML. Il s'agit des effets de survol d'un élément (:hover), de sélection d'un champ ou lien via l'usage de la touche de tabulation (:focus), de clic sur un lien (:active), de la différentiation entre un lien visité (:visited) et un lien non visité...

Principe


Tout d'abord, quel est le principe de ces deux pseudo-éléments ? Comme expliqué précédemment, ils permettent de rajouter un texte voire une image avant et après un élément HTML (un titre, un paragraphe, ce que vous voulez). Pourquoi l'utiliser ? Si vous en avez assez d'ajouter manuellement dans un titre - qui se répète - les mêmes symboles, alors utilisez cette propriété.

Un pseudo-élément s'utilise de cette façon :
Code:
Selecteur:before {
content: "♥";
}
Avec Selecteur pouvant être une .classe (précédée d'un point), un #identifiant (précédé d'un dièse) ou un marqueur HTML (précédé de rien du tout, comme body, h1, a...). Il y a beaucoup d'autres types de sélecteurs (qui eux même sont des combinaisons de sélecteurs) mais ceux là sont les bases.

Dans cet exemple j'ai mis le pseudo-élément :before, mais cela marche aussi pour le pseudo-élément :after. Ils s'appliquent toujours à un élément (une classe, un identifiant, un marqueur HTML...) et ne peuvent pas être utilisés tout seuls. Par ailleurs, la propriété content n'accepte pas le HTML.

Pour aller plus loin


Bref, jusque-là, rien d'exceptionnel. Mais la partie qui devient intéressante c'est quand nous combinons ça avec la pseudo-classe :hover. En effet, il est possible de combiner les pseudo-éléments avec des pseudo-classes. Pour rappel, la pseudo-classe :hover permet de gérer le comportement d'un élément au survol. On la voit beaucoup utilisée sur les liens, mais elle marche très bien pour n'importe quel autre bloc (sauf pour les vieilles versions de Internet Explorer évidemment). Vous aurez alors deux sélecteurs :
Code:
.MaClasse {
   /* propriétés de base de mon élément */
}

.MaClasse:hover {
   /* propriétés au survol de mon élément */
}
Pour combiner cet effet avec :before et :after, il faut bien faire attention à l'ordre : la pseudo-classe d'abord, et le pseudo-élément ensuite. Pour vous aider à vous en souvenir, n'oubliez pas que le pseudo-élément "rajoute" un truc. Vous le rajoutez donc à la fin.

Tenez, voici un code et son exemple :
Code:
/* un sélecteur "par défaut", ici une classe */
.MaClasse {
   color: #000099;
}

/* On ajoute un symbole devant l'élément doté de cette classe */
.MaClasse:before {
   content: "•";
}

/* effet au survol de l'élément doté de cette classe */
.MaClasse:hover {
   color: #FF0000;
}

/* SUBTILITE : On met un contenu "vide" avant l'élément quand il est survolé, pour qu'il disparaisse au survol */
.MaClasse:hover:before {
   content: "" !important;
}

/* On rajoute un symbole après l'élément doté de cette classe, quand il est survolé */
.MaClasse:hover:after {
   content: "♪";
}
Ici, !important est très important (d’où son nom), le fait de le mettre avant le point virgule (;) marquant la fin d'une déclaration CSS indique qu’il écrasera toutes les autres propriétés de :before pour cet élément. Ce n'est pas forcément utile dans ce cas (ça marche très bien sans) mais au moins vous le saurez.
A savoir : IE ignore complétement cette règle, donc ne soyez pas étonné si vous êtes sur IE de ne pas avoir les mêmes choses que sur Firefox ou Chrome.

On peut ajouter des margin, voire des padding, pour que cela éloigne le symbole du texte. Cela permet d'éviter que tout soit collé. On peut même ajouter des couleurs pour que le symbole ait une couleur différente que celle du texte.
Code:
.MaClasse:before {
   content: "¤";
   margin:0 10px;
   background-color:#C4698F;
}
.MaClasse:hover:before {
   content: "" !important;
   margin: 10px;
}
.MaClasse:hover:after {
   content: "♪";
   margin: 0 10px;
   color: green;
}
En fait, on peut tout faire avec, mettre des soulignements, un fond rien que pour le symbole, un cadre, etc.

CSS2.1 & CSS3


CSS3 propose une nouvelle écriture pour les pseudo-éléments :after & :before. En effet après le nom de la classe vous devez mettre deux " : " au lieu d'un.
Exemple : .MaClasse::before
Mais sachez que tous les navigateurs ne prennent pas en compte ces deux double-points, comme IE ou Opéra version 4.0


Dernière édition par Basil Hawkins le Dim 25 Avr 2010, 06:12, édité 1 fois
MessageSujet: Les pseudo-éléments :before et :after, mode d'emploi   Ven 05 Mar 2010, 17:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
Dans les messages, pour mettre ces mots avec l'effet before / after, y'a un code à mettre ?

R
Il suffit de l'appliquer comme ceci :
Code:
<div class="maClasse">Message</div>
Et de mettre l'autre code dans le CSS.


Q
Si on n'a pas accès au panneau d'administration, comment insérer le CSS ?

R
Ce n'est pas possible, demande à l'administrateur de le faire.


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Les pseudo-éléments :before et :after, mode d'emploi   Jeu 04 Aoû 2011, 05:21
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Tutoriel corrigé et mis à jour le 07/09/2012



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Les pseudo-éléments :before et :after, mode d'emploi   Ven 07 Sep 2012, 13:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.mavectragts.fr
avatar
{ Membre }
{ Membre }

Masculin Messages : 6



Ces pseudo element sont tres pratique surtout pour la creation de bouton qui peuvent donc etre extensible a volonté..
MessageSujet: Re: Les pseudo-éléments :before et :after, mode d'emploi   Lun 22 Oct 2012, 07:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://testcss.forumpro.fr/h1-accueil
avatar
{ Membre }
{ Membre }

Féminin Messages : 7



Kaiji a écrit:

Q
Si on n'a pas accès au panneau d'administration, comment insérer le CSS ?

R
Ce n'est pas possible, demande à l'administrateur de le faire.


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
On peut insérer du CSS entre les balises
Code:
<style>.nom_classe{
}</style>
(pour utiliser des pseudo-éléments comme "hover" ou autres il faudra utiliser la balise ci-dessus, je ne pense pas que ce soit utilisable pour la technique ci-dessous)
ou alors en propriété html, , par exemple :
Code:
<div style="color:black; font-size:10px;">Contenu</div>
Merci je ne connaissais pas ces pseudo-éléments


//
MessageSujet: Re: Les pseudo-éléments :before et :after, mode d'emploi   Mer 18 Sep 2013, 13:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.amisdesamis.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 14



Merci à vous, j'ai hâte de lire ça. Very Happy 
MessageSujet: Re: Les pseudo-éléments :before et :after, mode d'emploi   Dim 01 Déc 2013, 05:44
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Les pseudo-éléments :before et :after, mode d'emploi   
Revenir en haut Aller en bas
 

Les pseudo-éléments :before et :after, mode d'emploi

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Les pseudo-éléments :before et :after, mode d'emploi
» script Menu déroulant au survol du pseudo
» Pseudo-objet - Générateur de code
» comment faire clic droit et mon pseudo apparait
» origine de votre pseudo

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit