Notation sur 5 étoiles simple en HTML

Description

J'ai découvert une manière simple de faire un système d'évaluation en HTML, la technique consiste en entourer des balises <span> (ou autre, tant qu'elles sont en display:inline-block afin de s'afficher sur une ligne) les unes dans les autres, regardez plutôt:

Cliquez ici pour tester

<span class="C2etoiles"><div>1</div>

	

	<span class="C2etoiles"><div>2</div>

		

		<span class="C2etoiles"><div>3</div>

			

			<span class="C2etoiles"><div>4</div>

				

				<span class="C2etoiles"><div>5</div> <!-- les div ici permettent l'affichage de l'étoile via la propriété "content", avec le sélecteur ".C2etoiles div::after" -->



				</span>

			</span>

		</span>

	</span>

</span>



/* j'ai fait un CSS basique, le but étant de montrer la technique pour colorer le fond de l'étoile 1 si on est sur la 1ère étoile, les étoiles 1 et 2 si on est sur la 2ème étoile, etc */

.C2etoiles{

	background: red;

	display: inline-block;

	cursor: pointer;

}

.C2etoiles:hover{

	background: green;

}

.C2etoiles div{

	display: inline-block;

	padding: 5px;

}

.C2etoiles div::after{

	content:"\002605"; /* une étoile en Unicode */

}

Notation sur 5 étoiles simple en HTML

Description

Commentaires

Ajouter un commentaire