Pseudo element before et after
schancel
Messages postés
296
Date d'inscription
Statut
Membre
Dernière intervention
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
s'il vous plait j'aimerai que quelqu'un m'explique concretement les pseudo elements before et after avec un exemple
malgré les explication du web je n'arrive toujours pas a comprendre
soit before:
pour générer du contenu dynamiquement avant l'element
after:
...... apres l'element
je ne comprend vraiment pas ce qu'ils essaient de dire par là
svp
s'il vous plait j'aimerai que quelqu'un m'explique concretement les pseudo elements before et after avec un exemple
malgré les explication du web je n'arrive toujours pas a comprendre
soit before:
pour générer du contenu dynamiquement avant l'element
after:
...... apres l'element
je ne comprend vraiment pas ce qu'ils essaient de dire par là
svp
A voir également:
- Pseudo element before et after
- Pseudo whatsapp - Accueil - Messagerie instantanée
- Msi after - Télécharger - Optimisation
- Pseudo facebook - Guide
- Open element - Télécharger - HTML
- Element introuvable vérifiez son emplacement actuel et réessayez - Guide
3 réponses
que tu vas générer dynamiquement du contenu avant ou après ton élément...
dynamiquement parce que le bout de code qui va se rajouter n'est pas inscrit en dur dans ton code html mais par le navigateur.
ainsi tu peux par exemple afficher une icône à coté d'un texte dans un bouton ou encore un texte à la fin d'un paragraphe...
Cela évite de modifier le code html pour simplement rajouter une icône ou un bout de texte, ça se fait alors dans le fichier css.
dynamiquement parce que le bout de code qui va se rajouter n'est pas inscrit en dur dans ton code html mais par le navigateur.
ainsi tu peux par exemple afficher une icône à coté d'un texte dans un bouton ou encore un texte à la fin d'un paragraphe...
Cela évite de modifier le code html pour simplement rajouter une icône ou un bout de texte, ça se fait alors dans le fichier css.
Salut,
Je t'ai fait un exemple qui devrait te permettre de comprendre un peu tout ça:
Je t'ai fait un exemple qui devrait te permettre de comprendre un peu tout ça:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.idea{
width:auto;
margin:30px;
padding:10px;
background-color: #ddd;
border-radius:10px;
border:3px solid #bbb;
clear:both;
display:inline-block;
cursor:help;
}
.idea p{
margin:0;
margin-left:40px;
margin-top:5px;
color:#333;
}
.idea:hover{
background-color: #eee;
}
.idea:after{
content: "Vous ne trouvez pas cette idée géniale ?";
display:block;
color:#777;
font-size:8pt;
line-height:30px;
margin-left:40px;
}
.idea:before{
padding: 10px 0px 40px 40px;
background:url('http://www.netbuilder.fr/portail/imgs/ampoule.png') 0 15px no-repeat;
content: "Idée d'amélioration: ";
font-variant:small-caps;
font-size:15pt;
color:green;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="idea_container">
<div class="idea">
<p>créer de meilleurs exemples !!! <br />Quoique celui-ci ne me semble pas trop mauvais.</p>
</div>
</div>
<div class="idea_container">
<div class="idea">
<p>Générer des boîtes à idées génériques</p>
</div>
</div>
<div class="idea_container">
<div class="idea">
<p>Pouvoir proposer des idées simplement</p>
</div>
</div>
</body>
</html>
