फ़ॉन्ट भयानक प्रतिशत चौड़ाई खड़ी आइकन

Question

मैं सीएसएस के साथ निम्न प्रभाव को प्राप्त करना चाहते हैं:

इस स्टार आइकन एक फ़ॉन्ट है। मैं नारंगी पृष्ठभूमि की चौड़ाई को पर्सेंट द्वारा परिभाषित करना चाहता हूं, इसलिए 50% स्टार का सही आधा होना चाहिए।

<div class="container"> 
    <span class="star star-under fa fa-star"></span> 
    <span class="star star-over fa fa-star"></span> 
</div> 

और::

.container 
{ 
    font-size: 200px; 
    height: 300px; 
    position: relative; 
    width: 100%; 
} 

.star 
{ 
    display: inline-block; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

.star-under 
{ 
    color: #ddd; 
} 

.star-over 
{ 
    color: #f80; 
    overflow: hidden; 
    width: 30%; 
} 

समस्या यह है कि मैं आदेश चौड़ाई के% का उपयोग करने में चौड़ाई और ऊंचाई प्रदान करने की आवश्यकता है

अभी के लिए, मैं निम्नलिखित किया था। और अगर मैं कंटेनर की चौड़ाई और ऊंचाई को छोड़ देता हूं, तो यह कुछ भी प्रदर्शित नहीं करता है, क्योंकि इसमें बिल्कुल तैनात बच्चे होते हैं।

यह% मूल्य सर्वर साइड पर गणना की जाती है, तो मैं बल्कि यह इनलाइन रखना चाहते हैं, इस तरह:

<span class="star star-over fa fa-star" style="width: 62%;"></span> 

यह करने के लिए सबसे लचीला तरीका क्या है? सबसे लचीलापन से मेरा मतलब है कि वह कोई चौड़ाई और ऊंचाई प्रदान करने के लिए आवश्यक नहीं है।

Answer 1

आप कंटेनर को display:inline-block पर सेट कर सकते हैं, और केवल शीर्ष आइकन को position:absolute पर सेट कर सकते हैं।

.container { 
 
    font-size: 200px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.star-under { 
 
    color: #ddd; 
 
    vertical-align: top; 
 
} 
 
.star-over { 
 
    color: #f80; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 70%; 
 
    overflow: hidden; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <span class="star star-under fa fa-star"></span> 
 
    <span class="star star-over fa fa-star"></span> 
 
</div>