[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途？

[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途？

    可以不用再多写一个 dom
    可以用 content 搭配出很多效果

例子：

    固定尺寸 2:1 的容器
    文本前后增加 icon 或图片
    使用 data-* 和 content: attr(data-*) 搭配
    使用 :hover 和 content 搭配出很多效果
    作为修饰元素
    使用 content: counter() 玩有序数字
    参与 inline-block 垂直居中

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题