如何在这种情况下悬停效果之间的空间CSS的HTML PHP？

Question

看下面的代码并运行它，悬停效果将变成绿色，它变成一个坚实的盒子。我想要的是灰色的酒吧变成了绿色，所以他们之间仍有空间。我怎样才能做到这一点？欣赏。

.rating {float:left} 
 
.rating:not(:checked) > input { 
 
    position:absolute; 
 
    left:-9999px; 
 
    clip:rect(0,0,0,0); 
 
} 
 

 
.rating:not(:checked) > label { 
 
    float:right; 
 
    width:9px; 
 
    padding:0 .1em; 
 
    overflow:hidden; 
 
    white-space:nowrap; 
 
    cursor:pointer; 
 
    font-size:200%; 
 
    line-height:1.2; 
 
    color:#ddd; 
 
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); 
 
} 
 

 
.rating:not(:checked) > label:before { 
 
    content:'\00a0 \00a0 \00a0 '; 
 
    background-color: #c7c5c5; 
 
    -webkit-border-radius: 1px; 
 
    -moz-border-radius: 1px; 
 
    border-radius: 1px; \t 
 
} 
 

 
.rating > input:checked ~ label { 
 
    color: #f70; 
 
\t 
 
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); 
 
    } 
 

 
.rating:not(:checked) :hover ~ label:before { 
 
    content:'\00a0 \00a0 \00a0 '; 
 
    background-color: #4bce32; 
 
} 
 

 
.rating:not(:checked) :hover ~ label { 
 
    background-color: #4bce32; 
 
} 
 

 
.rating > input:checked + label:hover, 
 
.rating > input:checked + label:hover ~ label, 
 
.rating > input:checked ~ label:hover, 
 
.rating > input:checked ~ label:hover ~ label, 
 
.rating > label:hover ~ input:checked ~ label { 
 
    color: #ea0; 
 
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em  rgba(0,0,0,.5); 
 
}

<fieldset class="rating"> 
 
    <legend>Please rate:</legend> 
 
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> 
 
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> 
 
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> 
 
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> 
 
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> 
 
</fieldset>

Answer 1

像这样的事情可能会为你工作：

.rating:not(:checked) > label { 
... 
padding:0 .1em 0 0; 
border-left:.1em solid #fff; 
... 

https://jsfiddle.net/1wdt1nbc/