CSS 实例系列 - 03 - Rate 爱心评分

Hello 小伙伴们早上、中午、下午、晚上和深夜好，这里是 jsliang~

今儿要实现的是：Rate 评分

本期将和小伙伴们探讨：

• √ 通过 CSS，配合简单的 HTML + JS 完成评分组件

本实例的代码地址：

• Github - all for one

• 码上掘金 - 03 - Rate 爱心评分

一 前言

本 CSS 系列文章：

1. 主推学以致用。结合面试题和工作实例，让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 CSS 知识。

2. 主推纯 CSS。尽可能使用 HTML + CSS 完成学习目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知识，适合新人学习 + 大佬复习。

如果文章在一些细节上没写清楚或者误导读者，欢迎评论/吐槽/批判，你的点赞、收藏和关注是我更新的动力 ❤

• 更多知识分享文章可见：jsliang 的文档库

二 本期知识点

2.1 ::before 和 ::after

关于伪元素 ::before 和 ::after 以及 content，我们要简单化理解：

那就是 Web 版的 jsliang，为了钱（content）瞻前（::before）顾后（::after）。