CSS से सिंपल स्टार रेटिंग लुक कैसे बनाएं?

सिंपल स्टार रेटिंग केवल Font Awesome स्टार आइकन और CSS रंग से बनती है। भरे सितारे लाल + पीला बॉर्डर, खाली सितारे ग्रे। कोई इंटरएक्टिविटी नहीं, केवल दृश्य प्रतिनिधित्व।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 30px; }
    .fa { font-size: 30px; color: grey; }
    .rated { color: rgb(255, 0, 0); border: 2px solid yellow; }
  </style>
</head>
<body>
  <h1>Star Rating Example</h1>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• Font Awesome - fa-star क्लास
• .rated क्लास - लाल रंग, पीला बॉर्डर (भरे सितारे)
• डिफ़ॉल्ट ग्रे - .fa बेस क्लास (खाली सितारे)
• कोई JS नहीं - केवल दृश्य, इंटरएक्टिव नहीं
• इंलाइन स्पैन - एक पंक्ति में सितारे