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 !".
<!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
<!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>
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'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
