68 lines
1.1 KiB
CSS
68 lines
1.1 KiB
CSS
/*
|
|
Simple Grade system in HTML and CSS
|
|
You can use it simply by add this stylesheet in your HTML page and using
|
|
<span class="grade-X"></span> where X is an integer between 0 and 5 included
|
|
|
|
Written by Romain de Laage
|
|
MIT Licence
|
|
*/
|
|
|
|
|
|
*{
|
|
--colored: #10A010;
|
|
--uncolored: #C0C0C0;
|
|
}
|
|
|
|
.grade-0::before{
|
|
content: "";
|
|
color: var(--colored);
|
|
}
|
|
.grade-0::after{
|
|
content: "■■■■■";
|
|
color: var(--uncolored);
|
|
}
|
|
|
|
.grade-1::before{
|
|
content: "■";
|
|
color: var(--colored);
|
|
}
|
|
.grade-1::after{
|
|
content: "■■■■";
|
|
color: var(--uncolored);
|
|
}
|
|
|
|
.grade-2::before{
|
|
content: "■■";
|
|
color: var(--colored);
|
|
}
|
|
.grade-2::after{
|
|
content: "■■■";
|
|
color: var(--uncolored);
|
|
}
|
|
|
|
.grade-3::before{
|
|
content: "■■■";
|
|
color: var(--colored);
|
|
}
|
|
.grade-3::after{
|
|
content: "■■";
|
|
color: var(--uncolored);
|
|
}
|
|
|
|
.grade-4::before{
|
|
content: "■■■■";
|
|
color: var(--colored);
|
|
}
|
|
.grade-4::after{
|
|
content: "■";
|
|
color: var(--uncolored);
|
|
}
|
|
|
|
.grade-5::before{
|
|
content: "■■■■■";
|
|
color: var(--colored);
|
|
}
|
|
.grade-5::after{
|
|
content: "";
|
|
color: var(--uncolored);
|
|
} |