logo oujood
🔍

CSS Les pseudo-éléments :before et :after Ajouter un texte ou une image avant ou après le contenu d'un élément

.......................

OUJOOD.COM

CSS Les pseudo-éléments :before et :after


Les propriétés CSS

Le sélecteur de feuille de style css after est utilisé avec content, permet d'insérer un contenu (texte ou image) à la fin du contenu d'un élément.

Définition et utilisation:Les pseudo-éléments :before et :after

Les pseudo-élément ':before' et ':after' servent à insérer un contenu généré avant ou après celui d'un élément.

Le pseudo-élément :first-letter, ou :first-line, combinés aux pseudo-éléments :before et :after, s'applique à la première lettre, ou à la première ligne, de l'élément, y compris le texte inséré.
P.special:before {content: "Note !"}
Ceci ajoutera le contenu "Note !" avant l'élément P dont l'atribut class est special
P.special:first-letter {color: gold}
Et Ceci donnera une couleur or au "N" de "Note !".

Exemple Code : Sélectionner le code
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Lettrine</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold ; float: left }
   SPAN           { font-weight: bold }
   P.special:before {content: "Spécial !"}
	P.special:first-letter {color: gold}

  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Les premiers</SPAN> mots parmi ceux d'un article
  de journal.</P>
  <P class="special"><SPAN>Les premiers</SPAN> mots parmi ceux d'un article
  de journal.</P>
 </BODY>
</HTML>

Exemple Code :Insérer une image après ou avant le contenu d'un élément avec la pseudo classe after ou before Sélectionner le code
	<!DOCTYPE html>
<html>
<head>
<title>Insérer une image après ou avant le contenu d'un élément avec la pseudo classe after ou before</title>
<meta charset="UTF-8">
<style type="text/css">
h1:after {content:url(http://www.oujood.com/propriete-css/images/smiley.gif);}
h2:before {content:url(http://www.oujood.com/propriete-css/images/smiley.gif);}
</style>
</head>

<body>
<h1>Ceci est un titre</h1>
<p> Le pseudo-element :after  insert un contenu après un  élément.</p>
<h2>Ceci est un sous titre</h2>
<p><b>Note:</b> La propriété content est supportée dans IE à partir de  IE8 mais seulement si la !DOCTYPE est spécifié.</p>
</body>
</html>



Sommaire
Par carabde 10 mars 2014