5 STAR RATINGS (Read Only)

By Er. Amit Thatey
2 Comments  

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.

}

Comments

The Mock Test "Law Entrance Mock-Test-2019 (after 12th) English - 3" https://gyangossip.com/law-entrance-mock-test/mock-test/T3007 with 20 provided by GyanGossip https://gyangossip.com were what helped me prepare the exam.
Rahul   25 Jun 2019   

Good Job, its helps me a lot.
Rahul   06 Oct 2018