可使用CSS的::before伪元素在HTML5元素前添加装饰性内容，需配合content属性，适用于div、p、span等非替换元素。
如果您希望在HTML5元素之前添加装饰性内容或文本，可以使用CSS的 1、为需要添加前置内容的元素设置类名，例如 2、在CSS中使用 立即学习“前端免费学习笔记（深入）”； 3、确保该元素不是替换元素（如 可通过 1、在HTML中编写目标元素： 重要通知 2、在CSS中定义： 3、如需插入特殊符号，可使用Unicode，例如 利用 1、为伪元素设置 2、使用 3、通过 当需要根据元素自身属性（如 1、在HTML中添加带自定义属性的元素： 2、在CSS中调用： 3、确保属性名拼写与大小写完全一致，且属性值为纯文本，不解析HTML标签。 为避免伪元素干扰原有布局，常需清除其默认行为：禁用继承的 1、统一设置 2、父元素需设 3、若伪元素遮挡文字，添加::before伪元素。该伪元素需配合content属性才能生效，且仅适用于支持伪元素的HTML5元素（如、等）。以下是具体实现方式：
一、基础语法与必备条件
::before伪元素用于在选定元素的内容前插入生成内容，它本身不改变HTML结构，仅通过CSS控制视觉呈现。必须声明content属性（即使为空字符串），否则伪元素不会渲染。class="decorated"；.decorated::before { content: "★"; }语法定义前置内容；）且未设置display: none。二、插入纯文本内容
content属性直接写入字符串，支持中文、符号、空格及转义Unicode字符，适合添加标签、提示文字或分隔符。.tip::before { content: "【提示】"; font-weight: bold; }；content: "\2714\fe0f";表示带变体选择符的对勾。三、添加装饰性图标或图形
content结合background-image或字体图标（如Font Awesome），可在元素前呈现非文本图形。此时常需重置默认内边距与行高，并设为块级以精确控制尺寸。display: inline-block或block；width、height、background-image和background-size绘制图标；margin-right或transform调整图标与主内容间距，例如margin-right: 8px;。四、结合attr()动态插入HTML属性值
data-label）动态生成前置内容时，可使用attr()函数读取属性值并注入content，增强语义与复用性。离线；.status::before { content: attr(data-label) ": "; color: #d32f2f; }；五、样式隔离与定位控制
font-size缩放、重置vertical-align、显式设置position以支持绝对定位偏移。.target::before { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); }；position: relative以建立定位上下文；z-index: 1并确保父容器无overflow: hidden裁剪。
