CSS颜色可通过名称、十六进制、RGB、RGBA、HSL、HSLA表示，结合::before和::after伪元素可创建引号、背景、边框等装饰效果，如用RGBA实现半透明叠加，通过定位与content添加视觉元素，并利用transition实现悬停动画，提升页面表现力。
在CSS中，颜色可以通过多种方式表示，比如颜色名称、十六进制值、RGB、RGBA、HSL和HSLA。结合伪元素 ::before 和 ::after，我们可以为文本或容器添加丰富的视觉装饰效果，如背景色块、边框、图标或高亮提示。下面介绍常见颜色表示法与伪元素的实际应用技巧。
常用CSS颜色表示方法
CSS支持多种颜色写法，选择合适的方式有助于提高可读性和灵活性：
- 颜色名：如 red、blue、transparent
- 十六进制：如 #ff6b6b、#000、#ffffff
- RGB：rgb(255, 107, 107)
- RGBA：rgba(255, 107, 107, 0.8) —— 支持透明度
- HSL：hsl(0, 100%, 50%) —— 色相、饱和度、亮度
- HSLA：hsla(0, 100%, 50%, 0.7) —— 支持透明度，更易调节色彩
在伪元素中使用RGBA或HSLA可以实现半透明叠加效果，常用于背景遮罩或柔和装饰。
使用 ::before 和 ::after 添加文本装饰
伪元素允许我们在内容前后插入装饰性元素，不改变HTML结构。
立即学习“前端免费学习笔记（深入）”；
例如，为标题添加引号或图标：
.quote {
position: relative;
padding: 20px 30px;
font-style: italic;
}
.quote::before {
content: """;
font-size: 4em;
color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 10px;
left: 10px;
}
.quote::after {
content: """;
font-size: 4em;
color: rgba(0, 0, 0, 0.1);
position: absolute;
bottom: 10px;
right: 10px;
transform: rotate(180deg);
}
这里使用双引号字符并设置透明黑色（rgba）作为装饰，通过定位控制位置。
背景与边框装饰增强视觉层次
利用伪元素创建背景色块或描边，突出重点内容。
示例：为按钮添加底部高光条
.btn {
position: relative;
padding: 12px 24px;
background: #fff;
border: 2px solid #007acc;
color: #007acc;
cursor: pointer;
}
.btn::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, #00c6ff, #007acc);
}
通过 ::after 添加渐变色条，提升按钮的现代感。颜色使用了渐变搭配，增强视觉吸引力。
动态悬停效果中的颜色过渡
结合:hover与伪元素，可实现平滑的颜色动画。
例如，下划线从中心展开：
.link {
position: relative;
text-decoration: none;
color: #333;
transition: color 0.3s;
}
.link::before {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
background: #ff6b6b;
transition: width 0.3s ease, left 0.3s ease;
}
.link:hover {
color: #ff6b6b;
}
.link:hover::before {
width: 100%;
left: 0;
}
这里用红色（#ff6b6b）作为强调色，通过transition实现宽度和位置变化，营造动感。
基本上就这些。合理运用颜色表示法与伪元素，能有效提升页面细节表现力，无需额外标签即可实现复杂装饰效果。关键是掌握定位、content和颜色透明度的配合使用。
