Bonjour/Bonsoir à tous,
J'essaie vainement d'obtenir ce résultat :
Et avec ce code :
J'obtiens ceci :
Qu'est ce que je fais de travers, selon vous ?
Merci pour votre aide !
J'essaie vainement d'obtenir ce résultat :
Et avec ce code :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>nth letter de mes poules</title>
<style media="screen">
.bricks {
color:#fff;
}
.bricks.less {
color:red;
}
.bricks.more {
color:green;
}
.one:nth-letter(1),
.one:nth-letter(2)
{
color:#fff !important;
}
.two:nth-letter(1) {
color:#fff !important;
}
</style>
</head>
<body>
<span class='bricks'>???</span> petit<br>
<span class='bricks less one'>???</span> pet<br>
<span class='bricks more one'>???</span> pitie<br>
<span class='bricks less two'>???</span> pie<br>
<span class='bricks more three'>???</span> paradoxalement <br>
<span class='bricks less three'>???</span> petite <br>
</body>
</html>J'obtiens ceci :
Qu'est ce que je fais de travers, selon vous ?
Merci pour votre aide !
). Tu englobes le texte dans un élément <span>. Tu lui ajoutes surement un display inline-block et surtout tu mets padding-left en conséquence. Bien sûr tu appelles ton svg background-image avec les coordonnées adéquates. 
