Custom Star Rating
Stylish custom star rating component with hover effects
Code
.star-rating {
display: inline-block;
font-size: 0;
}
.star {
font-size: 36px;
color: #ddd;
cursor: pointer;
display: inline-block;
transition: color 0.2s ease;
}
.star:before {
content: '★';
}
.star:hover,
.star:hover ~ .star,
.star.active,
.star.active ~ .star {
color: #ffd700;
}
.star-rating:hover .star {
color: #ddd;
}
.star-rating:hover .star:hover,
.star-rating:hover .star:hover ~ .star {
color: #ffd700;
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="star-rating"</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="star active"</span>></"attr-name"</span>>class</span>="tag"</span>>span</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="star active"</span>></"attr-name"</span>>class</span>="tag"</span>>span</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="star active"</span>></"attr-name"</span>>class</span>="tag"</span>>span</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="star"</span>></"attr-name"</span>>class</span>="tag"</span>>span</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="star"</span>></"attr-name"</span>>class</span>="tag"</span>>span</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>