如何详细解释JavaScript中:before和:after伪类元素的使用方法？

本文共计1145个文字，预计阅读时间需要5分钟。

目录

1.基本用法

2.样式修改

3.清除浮动

4.content属性

1. string 2. attr() 3. url() /uri() 4. counter() before/after 伪类相对于在元素内部插入两个额外的标签，是最适合和推荐的应用方式。

目录

• 1.基本用法
• 2.样式修改
• 3.清除浮动
• 4.content属性
• 1、string
• 2、attr()
• 3、url()/uri()
• 4、counter()

before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

效果使用：

像这种小图标大多使用before，after来实现，不仅简单还方便。