oujood.com

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

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.
.......................

chercher |

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>
	




Par carabde 10 mars 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web