Ajoutez une étoile avant et après chaque élément de liste.
Indice : Utilisez les pseudo-éléments ::before et ::after avec la propriété content.
<style>
/* Votre code CSS ici */
</style>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>Corrigé :
<style>
li::before {
content: "★ ";
}
li::after {
content: " ★";
}
</style>Explication : ::before et ::after permettent d'ajouter du contenu avant et après l'élément.
Stylez la première ligne de chaque paragraphe en gras.
Indice : Utilisez le pseudo-élément ::first-line.
<style>
/* Votre code CSS ici */
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
Corrigé :
<style>
p::first-line {
font-weight: bold;
}
</style>Explication : ::first-line cible la première ligne d'un paragraphe.
Stylez la première lettre de chaque paragraphe en rouge et en grande taille.
Indice : Utilisez le pseudo-élément ::first-letter.
<style>
/* Votre code CSS ici */
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
Corrigé :
<style>
p::first-letter {
color: red;
font-size: 2em;
float: left;
}
</style>Explication : ::first-letter cible la première lettre d'un paragraphe.
Changez la couleur de fond et de texte du texte sélectionné.
Indice : Utilisez le pseudo-élément ::selection.
<style>
/* Votre code CSS ici */
</style>
<p>Sélectionnez ce texte pour voir le style appliqué.</p>Sélectionnez ce texte pour voir le style appliqué.
Corrigé :
<style>
::selection {
background-color: yellow;
color: black;
}
</style>Explication : ::selection style le texte sélectionné par l'utilisateur.
Stylez le texte d'indicateur d'un champ de formulaire en italique et gris.
Indice : Utilisez le pseudo-élément ::placeholder.
<style>
/* Votre code CSS ici */
</style>
<input type="text" placeholder="Entrez votre nom">Corrigé :
<style>
input::placeholder {
font-style: italic;
color: gray;
}
</style>Explication : ::placeholder style le texte d'indicateur dans un champ de formulaire.