Sujet Précédent Sujet Suivant

Pseudo element before et after

Fermé
schancel Messages postés 296 Date d'inscription dimanche 20 mars 2011 Statut Membre Dernière intervention 7 décembre 2018 - 4 mars 2012 à 11:10
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 5 mars 2012 à 13:33
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
A voir également:

3 réponses

Réponse 1 / 3
Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
5 mars 2012 à 09:02
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.
0
Réponse 2 / 3
schancel Messages postés 296 Date d'inscription dimanche 20 mars 2011 Statut Membre Dernière intervention 7 décembre 2018 49
5 mars 2012 à 10:30
et
content:"";
a quoi a voir
0
Réponse 3 / 3
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 5/03/2012 à 14:20
Salut,

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>
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
5 mars 2012 à 13:33
Sans content="", j'aurai du créer le texte "Idée d'amélioration: " dans chacune des div.idea.

Avec content, je le défini le texte une bonne fois pour toute en CSS et je n'ai plus qu'à m'occuper du texte principal de mon idée lorsque je crée nouvelle div.idea.

Pratique, non?
0

Discussions similaires

Comment "inspecter l'élément" sur Mac ?
enzo2501 -
Axymimi -

12 réponses
Impossible de copier car cet élément est trop volumineux
Alan_Cohen -
Utilisateur anonyme -

9 réponses
Peut ont retrouvé sont adresse email grace a sont pseudo PSN ou epic games ?
NexTIZY -
BigChips122 -

14 réponses
"X a défini votre pseudo sur"
bocoubocou -
diablo13800 -

3 réponses