CSS with a half-star effect

1, first download to use the Star font

Http://www.w3cplus.com/w3cplusDemo/demos/webFontIcon.html

2. css

 . cleanfloat::after{display:block; clear:both; content: ""; Visibility:hidden;        height:0;}        *{margin:0; padding:0;}            /* Font path according to your path to modify */@font-face {font-family: ' alluraregular '; Src:url ('.. /common/webfonticon/websymbols/fonts/websymbols-regular-webfont.eot '), url ('.. /common/webfonticon/websymbols/fonts/websymbols-regular-webfont. #iefix ') format (' Embedded-opentype '), url (‘.. /common/webfonticon/websymbols/fonts/websymbols-regular-webfont.woff ') format (' Woff '), url ('.. /common/webfonticon/websymbols/fonts/websymbols-regular-webfont.ttf ') format (' TrueType '), url ('..        /common/webfonticon/websymbols/fonts/websymbols-regular-webfont.svg#alluraregular ') format (' SVG ');            }. starfive span {display:block;float:left;font-size:25px; font-family: ' Alluraregular ';            Text-align:center;color: #888; width:27px;height:33px;line-height:33px; Margin-right:5px;posItion:relative;overflow:hidden;white-space:pre;            }. starfive Span:before {position:absolute;            left:0;top:0;display:block;width:50%;        Content:attr (data-content); Overflow:hidden;color: #F63;        }. sF1 span:before{width:70%;}        . sF2 span:before{width:50%;}        . sF3 span:before{width:40%;}        . starfive. Org_star {color: #F63;}            . starfive b {font-weight:normal; line-height:40px;        Font-size:25px;color: #888; margin-left:10px; }

3. HTML

<div>      <p class= ' cleanfloat starfive sF1 ' ><span class= ' Org_star ' >r</span><span class= ' Org_star ' >r</span><span class= ' Org_star ' >r</span><span class= ' Org_star ' >R</span ><span data-content= ' R ' >r</span><b>4.7 points </b></p>      <p class= ' cleanfloat Starfive sF2 ' ><span class= ' Org_star ' >r</span><span class= ' Org_star ' >r</span><span class= ' Org_star ' >r</span><span data-content= ' R ' >r</span><span>r</span><b >3.5 points </b></p>      <p class= ' cleanfloat starfive sF3 ' ><span class= ' Org_star ' >r</span ><span class= ' Org_star ' >r</span><span data-content= ' R ' >r</span><span>r</span ><span>r</span><b>2.4 points </b></p> </div>

CSS with a half-star effect