Comparaison de révisions

::after (:after)

Révision 441283 :

Révision 441283 par Delapouite le

Révision 443093 :

Révision 443093 par tregagnon le

Titre :
:after | ::after
::after (:after)
Identifiant d'URL :
CSS/:after
CSS/:after
Étiquettes :
"NeedsMobileBrowserCompatibility","NeedsBrowserCompatibility","Traduction_à_relire","css","Sélecteurs","Référence_CSS"
"Référence_CSS","NeedsMobileBrowserCompatibility","NeedsBrowserCompatibility","Traduction_à_relire","css","Sélecteurs"
Contenu :

Révision 441283
Révision 443093
nn30    <h3>
31      Usage simple
32    </h3>
nn41    <h3>
42      Bulles d'information
43    </h3>
44    <p>
45      L'exemple suivant montre l'utilisation du <a href="/fr/docs
 >/CSS/Pseudo-%C3%A9l%C3%A9ments" title="Pseudo-éléments">pseudo-él
 >ément</a> <code>::after</code> avec l'expression CSS {{ cssxref("
 >attr") }} et un <a href="/fr/docs/Web/HTML/Global_attributes#data
 >-*" title="/fr/docs/Web/HTML/Global_attributes#data-*">attribut p
 >ersonnalisé</a> data <code>data-descr</code> pour créer une bulle
 > d'information seulement en CSS.
46    </p>
47    <pre class="brush: html">
48&lt;!doctype html&gt;
49&lt;html&gt;
50&lt;head&gt;
51&lt;meta http-equiv="Content-Type" content="text/html; charset=UT
 >F-8" /&gt;
52&lt;title&gt;CSS tooltips&lt;/title&gt;
53&lt;style type="text/css"&gt;
54    span[data-descr] {
55        position: relative;
56        text-decoration: underline;
57        color: #00F;
58        cursor: help;
59    }
60 
61    span[data-descr]:hover::after {
62        content: attr(data-descr);
63        position: absolute;
64        left: 0;
65        top: 24px;
66        min-width: 200px;
67        border: 1px #aaaaaa solid;
68        border-radius: 10px;
69        background-color: #ffffcc;
70        padding: 12px;
71        color: #000000;
72        font-size: 14px;
73    }
74&lt;/style&gt;
75&lt;/head&gt;
76 
77&lt;body&gt;
78 
79    &lt;p&gt;This is an example &lt;span data-descr="collection o
 >f words and punctuation"&gt;text&lt;/span&gt; with a few &lt;span
 > data-descr="small popups which also hide again"&gt;tooltips&lt;/
 >span&gt;. Take a &lt;span data-descr="not to be taken literally"&
 >gt;look&lt;/span&gt;...
80    &lt;/p&gt;
81 
82&lt;/body&gt;
83&lt;/html&gt;
84</pre>
85    <p>
86      <a href="https://developer.mozilla.org/files/4591/css-only_
 >tooltips.html" title="css-only_tooltips.html">Voir cet exemple en
 > action</a>
87    </p>
n179              Support des animations et transitionn229              Support des animations et transitions
t274              Support des animations et transitiont324              Support des animations et transitions

Retour à l'historique