在这种情况下，如何在悬停效果和css html php之间留出空间？

查看下面的代码并运行它，悬停效果将变为绿色，它将成为一个实心框。我想要的是灰色的条变成绿色，这样它们之间还有一个空间。我怎样才能做到这一点？谢谢

.rating{float:left}
.额定值：未（：选中）>输入{
位置：绝对位置；
左：-9999px；
剪辑：rect（0,0,0,0）；
}
.额定值：未（：选中）>标签{
浮动：对；
宽度：9px；
填充：0.1米；
溢出：隐藏；
空白：nowrap；
光标：指针；
字体大小：200%；
线高：1.2；
颜色：#ddd；
文本阴影：1px 1px#bbb，2px 2px#666，.1em.1em.2em rgba（0,0,0,5）；
}
.额定值：未（：选中）>标签：之前{
内容：'\00a0\00a0\00a0'；
背景色：#C7C5C5C5；
-webkit边界半径：1px；
-moz边界半径：1px；
边界半径：1px；
}
.评级>输入：选中~标签{
颜色：#f70；
文本阴影：1px 1px#c60，2px 2px#940，.1em.1em.2em rgba（0,0,0,5）；
}
.额定值：未（：选中）：悬停~标签：之前{
内容：'\00a0\00a0\00a0'；
背景色：#4bce32；
}
.额定值：未（：选中）：悬停~标签{
背景色：#4bce32；
}
.评级>输入：选中+标签：悬停，
.评级>输入：选中+标签：悬停~标签，
.评级>输入：选中~标签：悬停，
.评级>输入：选中~标签：悬停~标签，
.评级>标签：悬停~输入：选中~标签{
颜色：#ea0；
文本阴影：1px 1px黄花，2px 2px#B57340，1em.1em.2em rgba（0,0,0,5）；
}

请注明：
五星
四星
三星
双星
一颗星

类似的东西可能适合您：

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

---

类似的东西可能适合您：

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