Name of code : Pseudo-elements et Pseudo-classes
Categorie : Overlays CSS
Exemples de Pseudo-elements et de Pseudo-classes en CSS
<!DOCTYPE html>
<html>
<head>
<title>Exemples de Pseudo-éléments et Pseudo-classes en CSS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
h1 {
font-size: 2em;
text-align: center;
margin: 2em 0;
}
p {
font-size: 1.2em;
line-height: 1.5;
margin: 1em 0;
}
/* Exemples de Pseudo-éléments */
p::before {
content: "Avant le texte : ";
font-weight: bold;
}
p::after {
content: " Après le texte.";
font-style: italic;
}
a::after {
content: " (lien)";
font-size: 0.8em;
font-style: italic;
}
/* Exemples de Pseudo-classes */
a:link {
color: #2f69b8;
text-decoration: none;
}
a:visited {
color: #8c3f81;
text-decoration: none;
}
a:hover {
color: #d04543;
text-decoration: underline;
}
a:active {
color: #ed9b40;
text-decoration: underline;
}
li:first-child {
color: #f08080;
font-weight: bold;
}
li:last-child {
color: #90ee90;
font-style: italic;
}
</style>
</head>
<body>
<h1>Exemples de Pseudo-éléments et Pseudo-classes en CSS</h1>
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
<li>Dernier élément de la liste</li>
</ul>
<p>Ceci est un paragraphe avec du texte.</p>
<p>Ceci est un autre paragraphe avec du texte.</p>
<p>Ceci est un <a href="#">lien</a>.</p>
</body>
</html>