::before是伪元素，用于在元素内容前插入装饰性内容。通过结合CSS渐变，可为标题等添加美观的渐变线条。例如，设置.header相对定位，其::before伪元素使用绝对定位、content为空字符串，并应用水平渐变背景linear-gradient(90deg, #ff7a00, #ff0080, #b200ff)，高度4px，置于顶部，形成横向装饰条。还可调整方向实现垂直渐变，或添加border-radius、动画等增强视觉效果，灵活实现现代UI装饰需求。
使用 ::before 伪元素结合 CSS 渐变，可以为元素添加美观的装饰条。这种方法常用于标题、卡片或分隔线的视觉增强。下面是如何实现一个简单的渐变装饰条。
::before 是什么？
::before 是一个伪元素，允许你在目标元素的内容之前插入装饰性内容，通常配合 content 属性使用。它不占用 HTML 结构，完全由 CSS 控制，非常适合做装饰效果。
创建渐变装饰条的步骤
假设你想在某个标题上方加一条横向渐变细线，可以这样写：
.header {
position: relative;
padding: 20px 0;
}
.header::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #ff7a00, #ff0080, #b200ff);
border-radius: 2px;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- position: relative：让 .header 成为定位上下文，使 ::before 能相对它定位。
- position: absolute：将伪元素脱离文档流，精确控制位置。
- top: 0：把装饰条放在元素顶部。
- background: linear-gradient(...)：设置水平渐变，从橙色到粉色再到紫色。
- content: ""：必须设置，否则 ::before 不会显示。
其他实用技巧
你可以根据需要调整渐变方向和形状：
- 垂直渐变装饰条：使用 linear-gradient(to bottom, ...)，并调整宽高和定位。
- 圆角或动画：加上 border-radius 或用 @keyframes 实现渐变移动（如动感光波）。
- 限制宽度居中：设置固定宽度 + left: 50%; transform: translateX(-50%)。
基本上就这些。通过 ::before 和渐变背景，你可以轻松为页面添加现代感十足的装饰线条，不影响结构又灵活可控。
