English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manuel complet de référence des sélecteurs CSS
Insérer du contenu après chaque élément <p> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base (oldtoolbag.com)<//title>
<style>
p:after
{
content:"- marque "
}
</style>
</head>
<body>
<p>Mon nom est Lili </p>
<p>J'habite sur la </p>
<p><b>Attention : </b> :after dans IE8Pour exécuter en ligne, il est nécessaire de déclarer !DOCTYPE </p>
</body>
</html>Voyons si ça fonctionne ‹/›Sélecteur :after pour insérer du contenu après l'élément sélectionné.
Utilisezcontent Utilisez une propriété pour spécifier le contenu à insérer.
Les nombres dans le tableau indiquent la première version du navigateur prenant en charge cette propriété.
| sélecteur | |||||
|---|---|---|---|---|---|
| ::after | 4.0 | 9.0 Partie de 8.0 | 3.5 | 3.1 | 7.0 Partie de4.0 |
Attention : after dans IE8Pour exécuter en ligne, il est nécessaire de déclarer<!DOCTYPE> .
Tutoriel CSS Pseudo-sélecteur CSS-éléments
Manuel de référence des sélecteurs CSS : Sélecteur :before CSS
Contenu et style insérés après chaque <p> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base (oldtoolbag.com)<//title>
<style>
p:after
{
content:"- marque";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>Mon nom est Lili </p>
<p>J'habite sur la </p>
<p><b>Attention : </b> :after dans IE8Pour exécuter en ligne, il est nécessaire de déclarer !DOCTYPE </p>
</body>
</html>Voyons si ça fonctionne ‹/›