CSS的::before伪元素用于在HTML元素内容前插入装饰性内容或样式化文本，需配合content属性使用，支持纯文本、图标、定位装饰块及attr()动态绑定。
如果您希望在HTML元素内容之前插入装饰性内容或样式化文本，可以使用CSS的::before伪元素。以下是具体应用方式：
一、基础语法与必需声明
::before伪元素必须配合content属性使用，否则不会渲染任何内容。该伪元素默认为行内级，可设置宽高、定位、背景等样式。
1、在CSS中选择目标元素，例如h2或自定义类名。
2、添加::before伪元素选择器，并在其中声明content属性。
立即学习“前端免费学习笔记（深入）”；
3、为::before设置display值（如block或inline-block）以支持尺寸与定位控制。
二、插入纯文本内容
通过content属性的字符串值，可在元素前添加静态文字，常用于标注、前缀或提示信息。
1、编写HTML结构，例如： 重要事项
2、在CSS中定义：.note::before { content: "⚠ "; }。
3、如需中文标点或特殊符号，直接写入字符串，例如content: "【注意】";。
三、添加图标或装饰性图形
利用content中的Unicode字符或外部字体图标（如Font Awesome），可实现轻量级图标前置效果。
1、确保页面已引入对应图标字体，例如通过@import加载Font Awesome CSS。
2、使用content插入Unicode码点，例如：content: "\f05a";（需配合font-family: "Font Awesome 5 Free";及font-weight: 900;）。
3、设置display: inline-block;并调整vertical-align以对齐文字基线。
四、结合定位实现悬浮装饰块
通过绝对定位将::before脱离文档流，可创建不干扰布局的装饰层，例如角标、边框延伸或背景点缀。
1、为目标元素设置position: relative;，为其伪元素提供定位上下文。
2、在::before中设置position: absolute;，并用top、left等指定偏移。
3、使用width、height、background-color或border-radius绘制形状，例如：content: "";（空字符串仅作占位）。
五、动态内容注入与属性绑定
借助attr()函数，可将HTML元素的自定义属性值提取并显示在::before中，实现内容与结构解耦。
1、在HTML标签中添加data-label等自定义属性，例如：商品。
2、在CSS中使用：span::before { content: attr(data-label); }。
3、可组合其他值，例如：content: "[" attr(data-label) "]";，生成带括号的标记。
