A pure CSS solution to create a simple five star rating using Html and CSS.
Create the Html for a five star rating
Create the css
[title="0.00"]::after {
width: 0%;
}
[title="0.25"]::after {
width: 7%;
}
[title="0.50"]::after {
width: 10%;
}
[title="0.75"]::after {
width: 15%;
}
[title="1.00"]::after {
width: 20%;
}
[title="1.25"]::after {
width: 27%;
}
[title="1.50"]::after {
width: 31%;
}
[title="1.75"]::after {
width: 35%;
}
[title="2.00"]::after {
width: 40%;
}
[title="2.25"]::after {
width: 48%;
}
[title="2.50"]::after {
width: 52%;
}
[title="2.75"]::after {
width: 56%;
}
[title="3.00"]::after {
width: 60%;
}
[title="3.25"]::after {
width: 69%;
}
[title="3.50"]::after {
width: 73%;
}
[title="3.75"]::after {
width: 75%;
}
[title="4.00"]::after {
width: 81%;
}
[title="4.25"]::after {
width: 91%;
}
[title="4.50"]::after {
width: 94%;
}
[title="4.75"]::after {
width: 96%;
}
[title="5.00"]::after {
width: 105%;
}
Just changing the width of the div according to the title value and checked state of the div. And also the background position is being changed.
.star-ratings-css {
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 25px;
height: 25px;
width: 100px;
margin: 0 auto;
position: relative;
text-shadow: 0 1px 0 #a2a2a2;
font-style: normal;
}
.star-ratings-css::before {
content: '☆ ☆ ☆ ☆ ☆';
opacity: .3;
}The unicode-bidi property is used together with the direction property, determines how bidirectional text in a document is handled.
bidi-override - Creates an additional level of embedding. Reordering depends on the direction property.
The before pseudo-element can be used to insert some content before the content of an element. The pseudo-elements are given a width and height, which determines the size of the stars.
.star-ratings-css::after {
color: gold;
content: '☆ ☆ ☆ ☆ ☆ ';
position: absolute;
z-index: 1;
display: block;
left: 0;
top:0;
width: attr(rating);
overflow: hidden;
The ::after pseudo-element can be used to insert some content after the content of an element. Set the position on absolute, the top: 0; left: 0; are implied. So the solid star just sits directly on top of the ::before content: '☆ ☆ ☆ ☆ ☆'; star. You could even change the color or size if you wished.
}