用最少的css代码做star rating

发表于 | 分类于

参考链接

first-step: 直接用unicode 标记星星(编码utf-8,so easy)

1
2
3
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

second-step: 给:hover添加伪元素，使得空心star变为实心

1
2
3
4
5
6
.rating > span:hover:before{
    /*content属性与:before以及:after伪元素使用，插入生成内容。*/
    /*该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。*/
    content:"\2605";
    position:absolute;
}

third-step: 解决选择相邻同级元素的问题

css 不能直接选择之前的同级元素，可以选择之后的同级元素。
所以，这里我们把字符的顺序更改了，就可以使用同级元素了，选取on hover 元素之前的所有star了。

1
2
3
4
5
6
7
8
9
10
.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color: gold;
}

summary

一般网站的打分功能需要与后台交互。
这个只是一个纯样式的，没有数据交互。
可以使用radio 表单元素设计可以真正交互的star rating。